Hub Usage

Code Content

How to display code beautifully in TTT.

Your knowledge sharing hub is best suited for tech companies and teams that want to share technical knowledge like code. For this reason, we have included many options to beautifully showcase both inline and blocks of code from your markdown content files. Here are some examples of what is available:

Inline Code

Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences.

Hello, I'm a sentence with inline code to catch your attention.

Hello, I'm a sentence with `inline code` to catch your attention.

Code Blocks

Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly.

type Item = { draft: boolean }
const res = toValue(data).filter((item: Item) => !item.draft)

```ts
type Item = { draft: boolean }
const res = toValue(data).filter((item: Item) => !item.draft)
```

You can specify the code language at the top of the code block to highlight the syntax accordingly. In the above example is ts.

Filename

When writing a code-block, you can specify a filename that will be displayed on top of the code block with []. An icon will be automatically displayed based on the extension or the name.

Filenames help users understand the code's location and purpose within a project.

api.ts

type Item = { draft: boolean }
const res = toValue(data).filter((item: Item) => !item.draft)

```ts [api.ts]
type Item = { draft: boolean }
const res = toValue(data).filter((item: Item) => !item.draft)
```

Every code-block has a built-in copy button that will copy the code to your clipboard.

Highlight Lines

To highlight lines of code, add {} around the line numbers you want to highlight after the filename.

Line highlighting is useful for focusing users on important parts of code examples.

You can specify line ranges with dashes: {1-3}, or highlight multiple lines with commas: {1,3}

api.ts

type Item = {
  draft: boolean
  slug: string
  }
const res = toValue(data)
  .filter((item: Item) => item.draft)
  .map((item: Item) => {
    return {
      ...item,
      slug: `/_drafts/${slug}`,
    }
  })

```ts [api.ts]{2,6}
type Item = {
  draft: boolean
  key: string
  slug: string
  }
const res = toValue(data)
  .filter((item: Item) => item.draft)
  .map((item: Item) => {
    return {
      ...item,
      slug: `/_drafts/${key}`,
    }
  })
```

Code Group

A code group allows you to tab multiple code blocks using the same frame. It is not limited to commands, you can also add multi-line code snippets.

pnpm add ttt/cli@next

yarn add ttt/cli@next

npm i ttt/cli@next

bun add ttt/cli@next

:::code-group
  ```bash [pnpm]{1}
  pnpm add ttt/cli@next
  ```
  ```bash [yarn]
  yarn add ttt/cli@next
  ```
  ```bash [npm]
  npm i ttt/cli@next
  ```
  ```bash [bun]
  bun add ttt/cli@next
  ```
::

Like the CodeBlock component, the CodeGroup handles filenames, icons, line highlights and copy button.

Code Preview

Use code-preview to show rendered output alongside the code. code-preview is ideal for component or interactive examples. Write the code to be previewed in the default slot and the actual code in the code slot.

  <UButton>Click me</UButton>
  <UButton variant="outline">Click me</UButton>
  <UButton variant="subtle">Click me</UButton>
  <UButton variant="ghost">Click me</UButton>

::code-preview
  <UButton>Click me</UButton>
  <UButton variant="outline">Click me</UButton>
  <UButton variant="subtle">Click me</UButton>
  <UButton variant="ghost">Click me</UButton>

#code
```mdc
  <UButton>Click me</UButton>
  <UButton variant="outline">Click me</UButton>
  <UButton variant="subtle">Click me</UButton>
  <UButton variant="ghost">Click me</UButton>
```
::

This whole page has been using CodePreview to show all examples.

Code Collapse

Use code-collapse for long code blocks to keep pages clean. code-collapse allows users to expand code blocks only when needed, improving readability.

main.css

@import "tailwindcss";

@theme {
  --font-sans: 'Public Sans', sans-serif;

  --breakpoint-3xl: 1920px;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

::code-collapse
```css [main.css]
@import "tailwindcss";
@theme {
  --font-sans: 'Public Sans', sans-serif;
  --breakpoint-3xl: 1920px;
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}
```
::

Code Tree

Display code blocks in a file tree view that resembles your IDE using the code-tree component. This component is excellent for showcasing complex project structures and file relationships.

README.md

# Install Tailwind CSS with Nuxt
Look at the official [Tailwind Installation Guide for Nuxt](https://tailwindcss.com/docs/installation/framework-guides/nuxt) to learn more.

## Commands
Make sure to install the dependencies:

```bash
npm i tailwindcss @tailwindcss/vite
```

  ::code-tree{default-value="README.md" expandAll}
  ```ts [nuxt.config.ts]{1,6,9}
    import tailwindcss from "@tailwindcss/vite";

    export default defineNuxtConfig({
      compatibilityDate: "2024-11-01",
      devtools: { enabled: true },
      css: ['~/assets/css/main.css'],
      vite: {
        plugins: [
          tailwindcss(),
        ],
      },
    });
  ```
  
  ```css [app/assets/css/main.css]{1}
  @import "tailwindcss";

  ```
  
  ```ts [app/app.config.ts]{4}
  export default defineAppConfig({
    ui: {
      colors: {
        primary: 'teal',
        colors: 'slate'
      }
    }
  })
  ```

  ```json [package.json]{17}
  {
    "name": "nuxt-app",
    "private": true,
    "type": "module",
    "scripts": {
      "build": "nuxt build",
      "dev": "nuxt dev",
      "generate": "nuxt generate",
      "preview": "nuxt preview",
      "postinstall": "nuxt prepare",
      "lint": "eslint .",
      "lint:fix": "eslint --fix ."
    },
    "dependencies": {
      "@iconify-json/lucide": "^1.2.18",
      "nuxt": "^3.15.1",
      "tailwindcss": "^4.1.11"
    },
    "devDependencies": {
      "eslint": "9.20.1",
      "typescript": "^5.7.2",
      "vue-tsc": "^2.2.0"
    }
  }
  ```

  ````md [README.md]{10}
  # Install Tailwind CSS with Nuxt
  Look at the official [Tailwind Installation Guide for Nuxt](https://tailwindcss.com/docs/installation/framework-guides/nuxt) to learn more.
  
  ## Commands
  Make sure to install the dependencies:
    ```bash
      npm i tailwindcss @tailwindcss/vite
    ```
  ````

You can specify the default file with ::code-tree{default-value="README.md"}

You can also expand all folders with ::code-tree{expandAll}

Markdown Syntax

How to use Markdown with TTT.

Media

How to display multimedia content in TTT.