initial commit after project creation
This commit is contained in:
Gerhard Scheikl
@@ -0,0 +1,253 @@
|
||||
---
|
||||
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
|
||||
```
|
||||
Reference in New Issue
Block a user