n-code

name	n-code
description	Code component for displaying syntax-highlighted code. Invoke when user needs to display code snippets with syntax highlighting in Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

Naive UI Code Component

Code component for displaying syntax-highlighted code blocks with support for multiple languages.

When to Use

Use this component when:

• Code display: Show code snippets with syntax highlighting
• Documentation: Display code examples in documentation
• Technical content: Present code in technical articles or tutorials
• Inline code: Display code within text content

When to Invoke

Invoke this skill when:

• User needs to display code with syntax highlighting
• User wants to show line numbers in code blocks
• User needs inline code display
• User wants word-wrapped code blocks
• User asks about setting up highlight.js for Code component

Prerequisites

Important: Naive UI does not include highlight.js by default. You must configure it before using the Code component.

<template>
  <n-config-provider :hljs="hljs">
    <my-app />
  </n-config-provider>
</template>

<script setup>
import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import python from 'highlight.js/lib/languages/python';

hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('python', python);

// Register only the languages you need to reduce bundle size
</script>

Features

• Syntax Highlighting: Support for multiple programming languages
• Inline Mode: Display code inline with text
• Line Numbers: Show line numbers in code blocks
• Word Wrap: Enable word wrapping for long lines
• Trim Support: Automatically trim leading/trailing whitespace
• Custom hljs: Configure highlight.js locally via prop

API Reference

Code Props

Name	Type	Default	Description
code	string	''	Incoming code string.
hljs	Object	undefined	If you want to set hljs locally, pass it using this prop.
inline	boolean	false	Whether the code is displayed as inline.
language	string	undefined	Code language in highlightjs.
show-line-numbers	boolean	false	Whether to show line numbers. Won't work if inline or word-wrap is true.
trim	boolean	true	Whether to display trimmed code.
word-wrap	boolean	false	Whether to display word-wrapped code.

Basic Usage

Basic Code Blocks

<template>
  <div style="overflow: auto">
    <n-space vertical :size="16">
      <n-code
        code="
  function sleep (ms = 1000) {
    return new Promise(resolve => setTimeout(resolve, ms))
  }
  "
        language="javascript"
      />
      <n-code
        code="
  def say_hello():
      print('Hello Naive UI')
  "
        language="python"
      />
    </n-space>
  </div>
</template>

Inline Code

<template>
  <div>
    JavaScript
    <n-code :code="code" language="javascript" inline />
    is awesome!
  </div>
</template>

<script setup>
const code = 'const x = 1';
</script>

Word Wrap

<template>
  <n-code :code="longCode" language="js" word-wrap />
</template>

<script setup>
const longCode = `const veryLongVariableName = 'This is a very long string that would normally overflow the container'`;
</script>

Line Numbers

<template>
  <div style="overflow: auto">
    <n-code :code="code" language="cpp" show-line-numbers />
  </div>
</template>

<script setup>
const code = `#include <iostream>

int main() {
    std::cout << "Hello, World!" << std::endl;
    return 0;
}`;
</script>

Common Patterns

Code Block with Copy Button

<template>
  <div class="code-container">
    <n-button size="tiny" class="copy-btn" @click="handleCopy">
      {{ copied ? 'Copied!' : 'Copy' }}
    </n-button>
    <n-code :code="code" language="javascript" />
  </div>
</template>

<script setup>
import { ref } from 'vue';

const code = `function hello() {
  console.log('Hello, World!')
}`;

const copied = ref(false);

const handleCopy = async () => {
  await navigator.clipboard.writeText(code);
  copied.value = true;
  setTimeout(() => {
    copied.value = false;
  }, 2000);
};
</script>

<style scoped>
.code-container {
  position: relative;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
}
</style>

Multiple Language Tabs

<template>
  <div>
    <n-tabs v-model:value="activeTab">
      <n-tab-pane name="js" tab="JavaScript">
        <n-code :code="jsCode" language="javascript" />
      </n-tab-pane>
      <n-tab-pane name="ts" tab="TypeScript">
        <n-code :code="tsCode" language="typescript" />
      </n-tab-pane>
    </n-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('js');

const jsCode = `function greet(name) {
  return \`Hello, \${name}!\`
}`;

const tsCode = `function greet(name: string): string {
  return \`Hello, \${name}!\`
}`;
</script>

Local hljs Configuration

<template>
  <n-code :hljs="hljs" :code="code" language="rust" />
</template>

<script setup>
import hljs from 'highlight.js/lib/core';
import rust from 'highlight.js/lib/languages/rust';

hljs.registerLanguage('rust', rust);

const code = `fn main() {
    println!("Hello, World!");
}`;
</script>

Code in Card

<template>
  <n-card title="Example Code">
    <n-code :code="code" language="javascript" show-line-numbers />
  </n-card>
</template>

<script setup>
const code = `// Example function
function example() {
  return true
}`;
</script>

Best Practices

1. Register languages on demand: Only import the languages you need to reduce bundle size

   import hljs from 'highlight.js/lib/core';
   import javascript from 'highlight.js/lib/languages/javascript';
   hljs.registerLanguage('javascript', javascript);
   

2. Use overflow container: Wrap code blocks in overflow containers for horizontal scrolling

   <div style="overflow: auto">
     <n-code :code="code" language="javascript" />
   </div>
   

3. Use word-wrap for long lines: Enable word-wrap when horizontal scrolling is not desired

   <n-code :code="code" language="javascript" word-wrap />
   

4. Configure hljs globally: Use n-config-provider to set hljs once for all Code components

   <n-config-provider :hljs="hljs">
     <app />
   </n-config-provider>
   

5. Use inline mode sparingly: Inline code is best for short snippets within text

   Use
   <n-code code="const x = 1" language="javascript" inline />
   for inline code.
   

6. Line numbers with block code: Use show-line-numbers for longer code blocks

   <n-code :code="code" language="python" show-line-numbers />