@svelte-dev/pretty-code 一个漂亮的 Svelte MDsveX 代码高亮显示插件

原创

已于 2023-12-18 13:53:54 修改 · 1.2k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #服务器 #数据库 #开发语言 #javascript

于 2023-12-18 13:52:53 首次发布

本文介绍了svelte-dev/pretty-code插件，一个用于Markdown或MDsveX的ESM语法高亮器，支持自定义主题、代码块样式和访问者钩子。详细讲解了安装、使用方法以及各种配置选项。

@svelte-dev/pretty-code 是一个由 rehype-pretty-code 和 shikiji 提供支持的 MDsveX 高亮插件。这个语法高亮器为 Markdown 或 MDsveX 提供了漂亮的代码块。它只适用于 块代码（不适用于 内联代码）。

官网：https://pretty-code.js.cool

安装

通过终端进行安装：

npm add @svelte-dev/pretty-code

此包仅支持 ESM，并且当前支持 shikiji ^0.7.0 || ^0.8.0。

使用

以下在服务器和客户端上都可以工作。

unified@11 被用作依赖项。

import {
   
    defineMDSveXConfig as defineConfig } from 'mdsvex';
import {
   
    createHighlighter } from '@svelte-dev/pretty-code';

const config = defineConfig({
   
   
  extensions: ['.svelte.md', '.md', '.svx'],

  highlight: {
   
   
    highlighter: createHighlighter({
   
   
      // keepBackground: false,
      theme: {
   
   
        dark: 'solarized-dark',
        light: 'solarized-light'
      }
    })
  }
});

export default config;

选项

interface Options {
   
   
  grid?: boolean;
  theme?: Theme | Record<string, Theme>;
  keepBackground?: boolean;
  defaultLang?: string;
  tokensMap?: Record<string, string>;
  transformers?: ShikijiTransformer[];
  filterMetaString?(str: string): string;
  getHighlighter?(options: BundledHighlighterOptions)