开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第1天，点击查看活动详情
烦请关注，点赞，收藏，评论，我十分想要挑战奖品
最终效果如图。
起因
相信不少小伙伴阅读过一篇文章：build-your-own-react
这是一篇通俗易懂的从头开始讲述如何创建一个react过程的文章，其中最吸引我的就是这个文章的代码排版方式。将所有代码放置在左侧，随着文档的滚动，左侧代码不断发生变化，不断提示我哪些代码发生了变动。这样的文档方式，是我之前没体验过的船新版本。去作者的gayhub看到正好有开源工具，于是自己搭建了demo，马上惊为天人。所以在这里我要做一个违背祖宗的决定，将其分享给大家。
code-hike简介
codehike.org/ code-hike是一个 mdx的插件，专注于文档写作的组件库。专注于代码的展示，具有以下几个功能：
代码块的展示
支持134种不同的编程语言，基本涵盖了目前市面上的编程语言。
批注和对代码的交互体验
可以看到在code-hike中可以对部分代码进行高亮显示，这部分主要通过force和mark来操作。同时它还允许你在代码块中进行链接，可以点击跳转到页面的其他位置。也可以自定义自己的样式显示。
一系列的code组件
一系列帮你优化code展示的组件，在本文中，将主要使用CH-scrollycoding作为展示。
安装
我们这里以Docusaurus为例作为展示，当然你也可以使用React，vite或其他任意模版或者docs框架作为开始。
我们首先安装docusaurus
npx create-docusaurus@latest my-website classic
然后安装hike的相关依赖
cd my-website
npm i @mdx-js/react@2 docusaurus-theme-mdx-v2 @code-hike/mdx
配置
首先配置docusaurus.config.js，插入mdx-v2主题
// docusaurus.config.js
const config = {
...
themes: ["mdx-v2"],
...
}
然后插入code-hike插件
// docusaurus.config.js
const theme = require("shiki/themes/nord.json")
const {
remarkCodeHike,
} = require("@code-hike/mdx")
const config = {
presets: [
[
"classic",
{
docs: {
beforeDefaultRemarkPlugins: [
[remarkCodeHike, { theme }],
],
sidebarPath: require.resolve("./sidebars.js"),
},
},
],
],
...
}
再设置下style
// docusaurus.config.js
...
const config={
theme: {
customCss: [
require.resolve("@code-hike/mdx/styles.css"),
],
},
}
}
至此所有配置完成，我的完整配置如下:
// @ts-check
// Note: type annotations allow type checking and IDEs autocompletion
const lightCodeTheme = require("prism-react-renderer/themes/github");
const darkCodeTheme = require("prism-react-renderer/themes/dracula");
const theme = require("shiki/themes/nord.json");
const { remarkCodeHike } = require("@code-hike/mdx");
/** @type {import('@docusaurus/types').Config} */
const config = {
title: "css and js",
tagline: "read everyday",
url: "https://your-docusaurus-test-site.com",
baseUrl: "/",
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
favicon: "img/favicon.ico",
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "facebook", // Usually your GitHub org/user name.
projectName: "docusaurus", // Usually your repo name.
// Even if you don't use internalization, you can use this field to set useful
// metadata like html lang. For example, if your site is Chinese, you may want
// to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "en",
locales: ["en"],
},
presets: [
[
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
({
docs: {
beforeDefaultRemarkPlugins: [[remarkCodeHike, { theme }]],
sidebarPath: require.resolve("./sidebars.js"),
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
},
blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
},
theme: {
customCss: [
require.resolve("@code-hike/mdx/styles.css"),
require.resolve("./src/css/custom.css"),
],
},
}),
],
],
themes: ["mdx-v2"],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
({
navbar: {
title: "My Site",
logo: {
alt: "My Site Logo",
src: "img/logo.svg",
},
items: [
{
type: "doc",
docId: "intro",
position: "left",
label: "阅读",
},
{ to: "/blog", label: "Blog", position: "left" },
{
href: "https://github.com/facebook/docusaurus",
label: "GitHub",
position: "right",
},
],
},
footer: {
style: "dark",
links: [
{
title: "Docs",
items: [
{
label: "Tutorial",
to: "/docs/intro",
},
],
},
{
title: "Community",
items: [
{
label: "Stack Overflow",
href: "https://stackoverflow.com/questions/tagged/docusaurus",
},
{
label: "Discord",
href: "https://discordapp.com/invite/docusaurus",
},
{
label: "Twitter",
href: "https://twitter.com/docusaurus",
},
],
},
{
title: "More",
items: [
{
label: "Blog",
to: "/blog",
},
{
label: "GitHub",
href: "https://github.com/facebook/docusaurus",
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
},
prism: {
theme: lightCodeTheme,
darkTheme: darkCodeTheme,
},
}),
};
module.exports = config;
特别注意
因为code hike使用的是mdx2，在此版本有一个破坏性更新，如果遇到以下问题
请找到
<!--truncate-->，将其删除
开始自己的demo
将docs下的一个md文件，改为如下的数据
为啥不在掘金贴代码块呢，因为跟掘金的markdown冲突了。。。
你得到了如下的效果
这就是一个简单的如我开头展示的效果。
代码标记
这里主要有两个点需要注意 ： 第一个是
---
三条横线，作为每段展示文档的分割，所以你可以看到我们的每一段都有这个标记
第二个是 focus
这个标记表明了你有哪些代码需要高亮，在demo中使用的是行高亮。一共有两种用法：
你可以写在文件开头，例如```js statement.js focus=6:8，这表示将从文件的开头进行计算，第6-8行 你也可以写在文件内，例如
// focus(1,1)
const result=[]
这表示，从标记位置开始的后面的1-1行，也就是第一行
除了这种按照行进行标记，你也可以标记列，例如
// focus[7:12]
result = 40000;
它表示从下一行的第7-12个字符。 效果为
