开启生长之旅！这是我参与「日新方案 12 月更文挑战」的第1天，点击检查活动概况
烦请关注，点赞，保藏，评论，我十分想要挑战奖品
最终作用如图。
起因
信任不少小伙伴阅读过一篇文章：build-your-own-react
这是一篇通俗易懂的从头开端叙述如何创建一个react过程的文章，其中最招引我的便是这个文章的代码排版方法。将一切代码放置在左侧，随着文档的滚动，左侧代码不断发生变化，不断提示我哪些代码发生了变动。这样的文档方法，是我之前没体会过的船新版本。去作者的gayhub看到正好有开源东西，所以自己搭建了demo，立刻惊为天人。所以在这儿我要做一个违反祖先的决定，将其共享给大家。
code-hike简介
codehike.org/ code-hike是一个 mdx的插件，专心于文档写作的组件库。专心于代码的展现，具有以下几个功用：
代码块的展现
支撑134种不同的编程言语，根本涵盖了现在市面上的编程言语。
批注和对代码的交互体会
一系列的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个字符。 作用为
