n-code

Render code blocks with highlight.js syntax highlighting for Naive UI components.

8|3|Updated Mar 13, 2026
One-click install
npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-code
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: n-code
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-code
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Code blocks in UIs and documentation often lack readability without proper syntax highlighting, making it harder to understand examples and API usage. This skill provides a dedicated code component that renders code with syntax highlighting across languages, improving clarity and consistency in documentation, demos, and tutorials.

Core Features & Use Cases

  • Syntax highlighting for multiple languages via highlight.js
  • Inline code rendering for in-text references
  • Language-aware formatting in documentation, tutorials, and demos
  • Optional line numbers and word wrap for long blocks
  • Prerequisites: configure highlight.js and register needed languages

Quick Start

Render a code block with syntax highlighting for a chosen language.

Frequently Asked Questions about n-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add syntax highlighting to code blocks in Vue documentation?

To add syntax highlighting to Vue documentation, use a dedicated code component that integrates highlight.js for language-aware formatting. You must configure the provider and register the needed languages to render highlighted code blocks.

Can I render inline code with syntax highlighting in Naive UI components?

Yes, you can render inline code with syntax highlighting in Naive UI components by enabling the inline mode prop. This feature provides language-aware formatting for in-text code references within your documentation or demos.

Do I need to configure highlight.js before displaying code blocks?

Yes, configuring highlight.js is a prerequisite before displaying code blocks. You need to register specific languages and set up the configuration via n-config-provider to ensure proper syntax highlighting across your UI components.

What is the best way to display long code snippets with line numbers in Vue?

The best way to display long code snippets with line numbers in Vue is using a code component that supports optional line numbers and word wrap props. This ensures readability for lengthy code blocks in tutorials and demos.

Why does my syntax highlighting not work after registering a language?

Syntax highlighting may fail if the n-config-provider is not properly configured to pass the highlight.js instance to the code component. Ensure the provider wraps your application and correctly supplies the required highlighting configuration.