代码块

要使用自定义组件来渲染代码块，您需要在 Code Hike 配置中提供组件的名称，然后确保该组件在渲染 Markdown 内容的作用域中可用。

your-config.mjs
import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"



const chConfig = {

  components: { code: "MyCode" },

}



const mdxOptions = {

  remarkPlugins: [[remarkCodeHike, chConfig]],

  recmaPlugins: [[recmaCodeHike, chConfig]],

}
page.tsx
import Content from "./content.md"

import type { RawCode } from "codehike/code"



export default function Page() {

  return <Content components={{ MyCode }} />

}



function MyCode({ codeblock }: { codeblock: RawCode }) {

  return <pre>{codeblock.value}</pre>

}

语法高亮

要为您的组件添加语法高亮，您可以使用 codehike/code 模块中的 highlight 函数。此函数接受一个 RawCode 对象和主题名称，并返回一个 HighlightedCode 对象。然后您可以将此对象传递给 Pre 组件来渲染高亮的代码。

code.tsx
import { Pre, RawCode, highlight } from "codehike/code"



export async function MyCode({ codeblock }: { codeblock: RawCode }) {

  const highlighted = await highlight(codeblock, "github-dark")

  return <Pre code={highlighted} />

}

React 服务器组件

请注意，highlight 函数是异步的，这意味着 MyCode 组件也需要是异步的。因此，上面的示例只有在您使用 React 服务器组件时才能工作。

**如果您使用的框架不支持 React 服务器组件：**您可以配置 Code Hike 在编译步骤中运行 highlight，并将 HighlightedCode 对象传递给 MyCode 组件。

your-config.mjs
import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"



const chConfig = {

  components: { code: "MyCode" },

+
  syntaxHighlighting: {

+
    theme: "github-dark",

+
  },

}



const mdxOptions = {

  remarkPlugins: [[remarkCodeHike, chConfig]],

  recmaPlugins: [[recmaCodeHike, chConfig]],

}
page.tsx
import Content from "./content.md"

import { HighlightedCode, Pre } from "codehike/code"



export default function Page() {

  return <Content components={{ MyCode }} />

}



function MyCode({ codeblock }: { codeblock: HighlightedCode }) {

  return <Pre code={codeblock} />

}

此设置还会对来自装饰代码块的代码进行语法高亮。

<Pre /> 组件

highlight 函数和 Pre 组件都是可选的。您可以使用不同的解决方案进行语法高亮，而不是使用 Code Hike 的 highlight，或者手动渲染高亮的标记，而不是使用 Pre 组件。使用它们的主要优势是支持注释和注释处理器。

主题

theme 选项接受内置主题的 string 或自定义主题的 object。

内置主题

dark-plus
dracula-soft
dracula
github-dark
github-dark-dimmed
github-light
light-plus
material-darker
material-default
material-lighter
material-ocean
material-palenight
min-dark
min-light
monokai
nord
one-dark-pro
poimandres
slack-dark
slack-ochin
solarized-dark
solarized-light
import { Pre, RawCode, highlight } from "codehike/code"

  

async function Code({codeblock}: {codeblock: RawCode}) {

  const highlighted = await highlight(codeblock, "dark-plus")

  return <Pre code={highlighted} style={highlighted.style} />

}

CSS 明暗主题

还有两个使用 CSS 支持明暗模式的内置主题："github-from-css" 和 "material-from-css"。

要使用它们，您需要将颜色作为 CSS 变量包含进来。您可以从这里复制 CSS：

并通过更改 CSS 选择器来适应您的需求。

自定义主题和 VS Code 主题

您可以使用主题编辑器来自定义任何内置主题或 VS Code 市场中的任何主题。

语言

Code Hike handles syntax highlighting for 211 languages: abap, actionscript-3, ada, apache, apex, apl, applescript, ara, asm, astro, awk, ballerina, bash, bat, batch, be, beancount, berry, bibtex, bicep, blade, c, c#, cadence, cdc, clarity, clj, clojure, cmake, cmd, cobol, codeql, coffee, console, cpp, crystal, cs, csharp, css, cue, cypher, d, dart, dax, diff, docker, dockerfile, dream-maker, elixir, elm, erb, erl, erlang, f#, fish, fs, fsharp, fsl, gdresource, gdscript, gdshader, gherkin, git-commit, git-rebase, glimmer-js, glimmer-ts, glsl, gnuplot, go, graphql, groovy, hack, haml, handlebars, haskell, hbs, hcl, hjson, hlsl, hs, html, http, imba, ini, jade, java, javascript, jinja-html, jison, js, json, json5, jsonc, jsonl, jsonnet, jssm, jsx, julia, kotlin, kql, kusto, latex, less, liquid, lisp, logo, lua, make, makefile, markdown, marko, matlab, md, mdx, mermaid, narrat, nextflow, nginx, nim, nix, objc, objective-c, objective-cpp, ocaml, pascal, perl, perl6, php, plsql, polar, postcss, powerquery, powershell, prisma, prolog, properties, proto, ps, ps1, pug, puppet, purescript, py, python, ql, r, raku, razor, rb, reg, rel, riscv, rs, rst, ruby, rust, sas, sass, scala, scheme, scss, sh, shader, shaderlab, shell, shellscript, shellsession, smalltalk, solidity, sparql, sql, ssh-config, stata, styl, stylus, svelte, swift, system-verilog, tasl, tcl, terminal, tex, text, toml, ts, tsx, turtle, twig, txt, typescript, v, vb, verilog, vhdl, vim, viml, vimscript, vue, vue-html, vyper, wasm, wenyan, wgsl, wolfram, xml, xsl, yaml, yml, zenscript, zsh, and 文言.

从文件导入代码到代码块

要在 Markdown 代码块中包含来自文件的代码，您可以使用 !from 指令，后跟文件路径（相对于 Markdown 文件）。

```js

!from ./assets/index.js

```

这将尝试找到相对于 Markdown 文件的 ./assets/index.js 文件，并用该文件的内容替换代码块。

忽略某些代码块

如果有一些代码块您不希望被 Code Hike 处理，您可以在配置中添加一个 ignoreCode 函数。此函数接收一个 RawCode 对象，如果应该忽略该代码块，则应返回 true。

your-config.mjs
/** @type {import('codehike/mdx').CodeHikeConfig} */

const chConfig = {

  components: { code: "MyCode" },

  ignoreCode: (codeblock) => codeblock.lang === "mermaid",

}

内联代码

您也可以为内联代码提供自定义组件：

your-config.mjs
import { remarkCodeHike, recmaCodeHike } from "codehike/mdx"



const chConfig = {

  components: {

    code: "MyCode",

+
    inlineCode: "MyInlineCode",

  },

}



const mdxOptions = {

  remarkPlugins: [[remarkCodeHike, chConfig]],

  recmaPlugins: [[recmaCodeHike, chConfig]],

}
page.tsx
import Content from "./content.md"

import { RawCode, Inline } from "codehike/code"



export default function Page() {

  return <Content components={{ MyInlineCode }} />

}



async function MyInlineCode({ codeblock }: { codeblock: RawCode }) {

  const highlighted = await highlight(codeblock, "github-dark")

  return <Inline code={highlighted} style={highlighted.style} />

}

要在 Markdown 中使用 MyInlineCode，您需要使用特殊语法：_`code`_。

此语法还允许您为内联代码指定语言和元数据 _py lorem ipsum`print 5`_，这将给您 {lang: "py", meta: "lorem ipsum", value: "print 5"}。

content.md
This is not handled by Code Hike: `var x = 10`



This is handled by Code Hike (with jsx as default lang): _`var x = 10`_



With a diffrent language: _css`a { color: #123 }`_
Output

This is not handled by Code Hike: var x = 10

This is handled by Code Hike (with jsx as default lang): var x = 10

With a diffrent language: a { color: #123 }

块

代码注释