Gerhard Scheikl
254 lines
7.3 KiB
Plaintext
254 lines
7.3 KiB
Plaintext
---
|
|
title: Code Components
|
|
last_edited: '2025-07-30T02:30:04.636Z'
|
|
auto_generated: false
|
|
---
|
|
|
|
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.
|
|
|
|
```javascript
|
|
js function greet(name) {
|
|
return `Hello, ${name}!`
|
|
}
|
|
```
|
|
|
|
### Syntax Highlighting
|
|
|
|
TinaDocs uses [Shiki](https://shiki.style/) to power code block rendering, because of this you are able to also use [Shiki's Transformer Notation](https://shiki.style/guide/transformers) for special highlighting.
|
|
|
|
```javascript
|
|
console.log('This is a highlighted block') // [!code highlight]
|
|
|
|
It uses "[!code highlight]" in a comment after the code
|
|
```
|
|
|
|
### Diff Highlighting
|
|
|
|
```javascript
|
|
console.log('This is a negative diff') // [!code --]
|
|
console.log('This is a positive diff') // [!code ++]
|
|
|
|
It uses "[!code --]" or "[!code ++]" in a comment after the code
|
|
```
|
|
|
|
### Focused Highlighting
|
|
|
|
```javascript
|
|
console.log('Junk Code');
|
|
console.log('Focused Code'); // [!code focus]
|
|
console.log('More hidden code');
|
|
|
|
It uses "[!code focus]" in a comment after the code
|
|
```
|
|
|
|
## 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.
|
|
|
|
<codeTabs
|
|
tabs={[
|
|
{
|
|
name: "cURL",
|
|
content: "curl�-�X�GET�https://jsonplaceholder.typicode.com/posts/1",
|
|
language: "shell"
|
|
},
|
|
{
|
|
name: "Response",
|
|
content:
|
|
'{\n��"userId":�1,\n��"id":�1,\n��"title":�"sunt�aut�facere�repellat�provident�occaecati�excepturi�optio�reprehenderit",\n��"body":�"quia�et�suscipit\\nsuscipit�recusandae�consequuntur�expedita�et�cum..."\n}',
|
|
language: "json"
|
|
}
|
|
]}
|
|
initialSelectedIndex={1}
|
|
/>
|
|
|
|
<codeTabs
|
|
tabs={[
|
|
{
|
|
name: "React",
|
|
content:
|
|
"import�React,�{�useState�}�from�'react';\n\nfunction�Counter()�{\n��const�[count,�setCount]�=�useState(0);\n\n��return�(\n����<div>\n������<p>Count:�{count}</p>\n������<button�onClick={()�=>�setCount(count�+�1)}>Increment</button>\n����</div>\n��);\n}\n\nexport�default�Counter;",
|
|
language: "javascript"
|
|
},
|
|
{
|
|
name: "Vue",
|
|
content:
|
|
"<template>\n��<div>\n����<p>Count:�{{�count�}}</p>\n����<button�@click=\"increment\">Increment</button>\n��</div>\n</template�>\n\n<script�setup>\n��import�{ref}�from�'vue';\n\n��const�count�=�ref(0);\n��const�increment�=�()�=>�count.value++;\n</script>",
|
|
language: "javascript"
|
|
},
|
|
{
|
|
name: "Angular",
|
|
content:
|
|
"import�{�Component�}�from�'@angular/core';\n\n@Component({\n��selector:�'app-counter',\n��template:�`\n����<div>\n������<p>Count:�{{�count�}}</p>\n������<button�(click)=\"increment()\">Increment</button>\n����</div>\n��`\n})\nexport�class�CounterComponent�{\n��count�=�0;\n��increment()�{\n����this.count++;\n��}\n}",
|
|
language: "javascript"
|
|
}
|
|
]}
|
|
initialSelectedIndex={2}
|
|
/>
|
|
|
|
## 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.
|
|
|
|
<recipe
|
|
code="import�React,�{�useState�}�from�'react';
|
|
|
|
function�Counter()�{
|
|
��const�[count,�setCount]�=�useState(0);
|
|
|
|
��return�(
|
|
����<div>
|
|
������<p>Count:�{count}</p>
|
|
������<button�onClick={()�=>�setCount(count�+�1)}>Increment</button>
|
|
����</div>
|
|
��);
|
|
}
|
|
|
|
export�default�Counter;"
|
|
title=""
|
|
description=""
|
|
instruction={[
|
|
{
|
|
itemDescription: "Import the useState hook from React",
|
|
header: "Imports",
|
|
codeLineStart: 1,
|
|
codeLineEnd: 1
|
|
},
|
|
{
|
|
itemDescription: "Define a functional component named Counter",
|
|
header: "Define Component",
|
|
codeLineStart: 3,
|
|
codeLineEnd: 3
|
|
},
|
|
{
|
|
header: "Define State",
|
|
itemDescription:
|
|
"Declare state variable `count` with initial value 0, `setCount` is the updater function",
|
|
codeLineStart: 4,
|
|
codeLineEnd: 4
|
|
},
|
|
{
|
|
itemDescription: "Return JSX to render the UI",
|
|
header: "Render Logic",
|
|
codeLineStart: 7,
|
|
codeLineEnd: 10
|
|
}
|
|
]}
|
|
/>
|
|
|
|
## API Route Block
|
|
|
|
Takes data directly from an OpenAPI spec to populate this component with schema, responses and examples.
|
|
|
|
<apiReference schemaFile="Swagger-Petstore.json|GET:/user/login" />
|
|
|
|
## 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.
|
|
|
|
<fileStructure
|
|
fileStructure={[
|
|
{ id: "zm0xmlefo", name: "Folder A", type: "folder", parentId: null },
|
|
{ id: "d7bw8ns62", name: "File A.txt", type: "file", parentId: "zm0xmlefo" },
|
|
{
|
|
id: "xaiajws95",
|
|
name: "Subfolder A",
|
|
type: "folder",
|
|
parentId: "zm0xmlefo"
|
|
},
|
|
{ id: "xv64qw84k", name: "Folder B", type: "folder", parentId: null },
|
|
{ id: "beqrd40u0", name: "Subfolder", type: "folder", parentId: "xv64qw84k" },
|
|
{ id: "yijaqtwhg", name: "File B.txt", type: "file", parentId: "beqrd40u0" },
|
|
{ id: "hfv48qb0z", name: "Home Route File.txt", type: "file", parentId: null }
|
|
]}
|
|
caption="An example file structure"
|
|
/>
|
|
|
|
## Mermaid
|
|
|
|
TinaDocs supports [Mermaid.js](https://mermaid.js.org/), 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.
|
|
|
|
<Callout
|
|
body={<>
|
|
Mermaid Rendering is **client-side** only, so server-side previews wont show diagrams
|
|
</>}
|
|
variant="warning"
|
|
/>
|
|
|
|
### Flowcharts
|
|
|
|
```mermaid
|
|
%% This won't render without implementing a rendering engine (e.g. mermaid on npm)
|
|
flowchart TD
|
|
id1(this is an example flow diagram)
|
|
--> id3(Click the top button to preview the changes)
|
|
```
|
|
|
|
### Sequence Diagrams
|
|
|
|
```mermaid
|
|
%% This won't render without implementing a rendering engine (e.g. mermaid on npm)
|
|
sequenceDiagram
|
|
participant Client
|
|
participant API
|
|
participant DB
|
|
|
|
Client->>API: GET /data
|
|
API->>DB: Query data
|
|
DB-->>API: Result
|
|
API-->>Client: Response
|
|
```
|
|
|
|
### State Diagram
|
|
|
|
```mermaid
|
|
stateDiagram-v2
|
|
[*] --> Waiting
|
|
Waiting --> RequestSent: Client calls API
|
|
RequestSent --> Complete: API sends response
|
|
Complete --> [*]
|
|
|
|
```
|
|
|
|
### Class Diagram
|
|
|
|
```mermaid
|
|
classDiagram
|
|
class Client {
|
|
+requestData()
|
|
}
|
|
class API {
|
|
+handleRequest()
|
|
+queryDB()
|
|
}
|
|
class DB {
|
|
+runQuery()
|
|
}
|
|
|
|
Client --> API : calls
|
|
API --> DB : queries
|
|
|
|
```
|
|
|
|
### Pie Chart
|
|
|
|
```mermaid
|
|
pie
|
|
title API Resource Usage
|
|
"Client Requests" : 30
|
|
"API Processing" : 40
|
|
"DB Query Time" : 30
|
|
```
|