Rehype Code
コードのシンタックスハイライター
Fumadocs で使用されているシンタックスハイライター @shikijs/rehype のラッパーです。
未加工の <pre /> コードブロックを、シンタックスハイライトが適用されたコードブロックに変換します。
```ts
console.log('Hello World');
```使い方
Rehype Code は rehype プラグインで、Fumadocs MDX ではデフォルトで有効になっています。オプションは rehypeCodeOptions で指定します。
import { defineConfig } from 'fumadocs-mdx/config';
export default defineConfig({
mdxOptions: {
rehypeCodeOptions: {
themes: {
light: 'github-light',
dark: 'github-dark',
},
},
},
});ハイライター
このプラグインは Shiki を使用します。rehypeCodeFromHighlighter は Shiki の代わりに Highlights などの別のハイライターを受け取り、Shiki 固有のオプションを除いた同じオプションを使用します。プラグインのトランスフォーマーを適用してハイライターを作成する関数を渡してください。
デフォルトのプラグインを無効にし、こちらを追加します。
import { defineConfig } from 'fumadocs-mdx/config';
import { rehypeCodeFromHighlighter } from 'fumadocs-core/mdx-plugins/rehype-code.core';
import { highlighter } from './lib/highlighter';
export default defineConfig({
mdxOptions: {
rehypeCodeOptions: false,
rehypePlugins: [
() =>
rehypeCodeFromHighlighter(({ transformers }) =>
highlighter.override({ shikiTransformers: transformers }),
),
],
},
});Meta
メタ文字列から title をパースし、pre 要素に属性として追加します。
```js title="Title"
console.log('Hello');
```filterMetaString オプションを使用すると、処理前に meta 文字列をフィルタリングできます。
インラインコード
inline オプションを使うと有効にできます。
import { type RehypeCodeOptions } from 'fumadocs-core/mdx-plugins';
const rehypeCodeOptions: RehypeCodeOptions = {
inline: 'tailing-curly-colon',
};これはハイライトされたインラインコードです: `console.log("hello world"){:js}`.これはハイライトされたインラインコードです：console.log("hello world")。
アイコン
このプラグインは、コードブロックの言語指定に応じて icon 属性を自動的に追加します。
値は HTML 文字列なので、React の dangerouslySetInnerHTML を使ってレンダリングできます。
```ts
console.log('This should shows the logo of TypeScript');
```icon オプションで、アイコンを無効化またはカスタマイズできます。
その他のオプション
オプションは Shiki から継承しています。その他のオプションについては Shiki のドキュメントを参照してください。
How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep