Code Components
Several components have been implemented to help out with software documentation.
Code Blocks
For multiline code samples, use triple backticks. You can also specify which language is used in the fenced code block for associated code highlighting.
Syntax Highlighting
TinaDocs uses Shiki to power code block rendering, because of this you are able to also use Shiki's Transformer Notation for special highlighting.
Diff Highlighting
Focused Highlighting
Tabbed Code Blocks
Tabbed code blocks let you present multiple language variants or configurations side-by-side—ideal for showing equivalent code in JavaScript, TypeScript, Bash, or specific queries and responses.
This improves readability and UX for polyglot dev environments.
Recipe Block
Perfect for tutorials, API documentation, or any scenario where you want to guide users through code examples with numbered steps corresponding to specific lines of code.
API Route Block
Takes data directly from an OpenAPI spec to populate this component with schema, responses and examples.
Directory
To convey code architecture or organisation conventions, showing users folder structures helps convey structural ideas that can be tricky to explain textually.
The editing experience is smooth with a tailored drag-and-drop interface.
Mermaid
TinaDocs supports Mermaid.js, to define and render diagrams directly inside Markdown content.
This lets you to add flowcharts, sequence diagrams, Gantt charts, and more.
The diagram shares the code block node in the editor, but lets you preview what the diagram will look like.
Mermaid Rendering is client-side only, so server-side previews wont show diagrams