Shiki 项目教程

Shiki 项目教程

shikiA beautiful Syntax Highlighter.项目地址:https://gitcode.com/gh_mirrors/sh/shiki

项目介绍

Shiki 是一个美观且强大的语法高亮工具，它基于 TextMate 语法定义，能够为多种编程语言生成精确的语法高亮。Shiki 支持多种主题，并且可以轻松集成到各种编辑器和文档生成工具中。

项目快速启动

安装 Shiki

首先，你需要通过 npm 安装 Shiki：

npm install shiki

基本使用

以下是一个简单的示例，展示如何使用 Shiki 进行语法高亮：

const shiki = require('shiki');

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  const code = `console.log('Hello, world!')`;
  const highlightedCode = highlighter.codeToHtml(code, { lang: 'js' });
  console.log(highlightedCode);
});

应用案例和最佳实践

集成到 Markdown 渲染器

Shiki 可以轻松集成到 Markdown 渲染器中，为代码块提供语法高亮。以下是一个示例：

const shiki = require('shiki');
const marked = require('marked');

shiki.getHighlighter({
  theme: 'dark-plus'
}).then(highlighter => {
  marked.setOptions({
    highlight: (code, lang) => {
      return highlighter.codeToHtml(code, { lang });
    }
  });

  const markdown = `
  # Hello, Shiki!

  \`\`\`javascript
  console.log('Hello, world!');
  \`\`\`
  `;

  const html = marked(markdown);
  console.log(html);
});

自定义主题

Shiki 支持自定义主题，你可以根据需要创建自己的主题文件，并加载它：

const shiki = require('shiki');

shiki.getHighlighter({
  themes: ['nord', './my-theme.json']
}).then(highlighter => {
  const code = `console.log('Hello, world!')`;
  const highlightedCode = highlighter.codeToHtml(code, { lang: 'js' });
  console.log(highlightedCode);
});

典型生态项目

VS Code 插件

Shiki 可以作为 VS Code 插件的一部分，提供语法高亮功能。以下是一个简单的插件示例：

const vscode = require('vscode');
const shiki = require('shiki');

function activate(context) {
  shiki.getHighlighter({
    theme: 'material-theme-palenight'
  }).then(highlighter => {
    vscode.languages.registerDocumentRangeFormattingEditProvider('javascript', {
      provideDocumentRangeFormattingEdits(document, range) {
        const code = document.getText(range);
        const highlightedCode = highlighter.codeToHtml(code, { lang: 'js' });
        return [vscode.TextEdit.replace(range, highlightedCode)];
      }
    });
  });
}

exports.activate = activate;

静态站点生成器

Shiki 可以集成到静态站点生成器（如 Gatsby 或 Next.js）中，为代码块提供语法高亮。以下是一个 Gatsby 插件示例：

const shiki = require('shiki');

exports.onPreBootstrap = async () => {
  const highlighter = await shiki.getHighlighter({
    theme: 'one-dark-pro'
  });

  exports.highlight = (code, lang) => {
    return highlighter.codeToHtml(code, { lang });
  };
};

通过这些示例，你可以看到 Shiki 在不同场景下的应用和最佳实践，帮助你更好地理解和使用这个强大的语法高亮工具。

shikiA beautiful Syntax Highlighter.项目地址:https://gitcode.com/gh_mirrors/sh/shiki