如何使用TinaMarkdown进行语法高亮

January 20, 2022

By James Perkins

👋 你好，欢迎来到这里。今天我们将带你了解如何使用TinaMarkdown进行语法高亮。通过一个非常基础的设置和示例，我们将指导你添加语法高亮，让你的编辑们会爱上你（或者至少非常欣赏你）。

更喜欢通过视频学习？查看我们关于语法高亮的视频：

设置

我为本教程创建的起始点包含了一个非常基础的Tina实现，其中包括一个博客。它使用了我们的rich-text编辑器和我们的TinaMarkdown组件。

# 克隆仓库
git clone https://github.com/tinacms/examples.git tina-examples
cd tina-examples

# 起始提交
git checkout 7753363ad1e967524359131565f13791d3a378eb

# 进入目录
cd syntax-highlighting

# 安装依赖
yarn

# 启动Tina + Next.js
yarn dev

一旦我们的Next.js应用程序运行起来，你可以导航到http://localhost:3000/post/HelloWorld。在那里你会看到一篇博客文章，其中的代码块看起来很像普通文本。当它在段落中时，你或你的编辑可能很难分辨代码和普通文本之间的区别。添加语法高亮将轻松解决这个问题！

添加语法高亮

安装我们的包

在本教程中，我们将使用react-syntax-highlighter。如果你更喜欢其他包，一旦你完成本教程并了解其工作原理，你可以使用你喜欢的包，它将同样有效。

# 安装语法高亮包
yarn add react-syntax-highlighter

现在我们已经安装了语法高亮器，我们可以创建一个组件来传递我们的props。

创建我们的组件

首先，我们需要在components文件夹中创建一个名为Codeblock.js的新文件。

# 在components目录中创建文件
touch  ./components/Codeblock.js

需要比较你的代码，请点击这里查看提交

在我们新创建的Codeblock.js文件中，我们需要导入一个主题和Prism。我将使用我最喜欢的主题atomOneDark，但你喜欢的主题也会和我的一样好用。

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import atomOneDark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-dark';

我们正在创建的组件将接收两个props：children和language。children props包含我们在代码块中输入的所有代码，language将是编辑内容时选择的语言，例如javascript。

const Codeblock = ({ children, language }) => {};

现在我们有了组件的框架，我们可以返回我们的SyntaxHighlighter并传入children和language。SyntaxHighlighter将接收三个不同的props：code、language和style，例如：

<SyntaxHighlighter
  code={YOUR_CODE}
  language={YOUR_LANGUAGE}
  style={YOUR_THEME}
/>

因此，对于我们的组件，我们将children传递给code prop，language传递给language prop，atomOneDark传递给style prop。现在它应该看起来像这样：

const Codeblock = ({ children, language }) => {
  return (
    <SyntaxHighlighter
      code={children || ''}
      language={language || 'jsx'}
      style={atomOneDark}
    />
  );
};

你可能注意到我在我们传递的props中包含了一个或语句。这将确保当我们创建一个新的空代码块时，Prism不会出错。

最后，我们需要导出我们的组件以便在我们的[slug].js文件中使用。我们可以通过在文件底部添加export {Codeblock}来实现。我们的组件文件现在完成了，应该看起来像这样：

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import atomOneDark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-dark';

const Codeblock = ({ children, language }) => {
  return (
    <SyntaxHighlighter
      code={children || ''}
      language={language || 'jsx'}
      style={atomOneDark}
    />
  );
};

export { Codeblock };

在此提交中查看完整的组件

在`[slug].js`中使用我们的组件

现在，我们将把刚刚创建的组件导入到[slug].js文件中。

import { Codeblock } from '../../components/Codeblock';

这使我们可以访问该组件，并且我们可以创建一个名为components的变量。这个components变量可以包含我们希望TinaMarkdown使用的所有不同组件。在我们的示例中，我们是覆盖一个元素而不是创建一个新组件。

const components = {};

我们将覆盖code_block元素，如果你想知道可以覆盖哪些元素，你可以在我们的tinacms包中找到它们。

在我们的组件变量中，我们可以放置一个名为code_block的属性，然后我们可以用它来覆盖原始样式：

const components = {
    code_block:
}

现在我们将使用从我们的TinaMarkdown传递的props，并将它们传递给我们创建的组件并返回它

code_block: (props) => {
  return <Codeblock children={props.children} language={props.lang} />;
};

我们的components对象现在完成了，应该看起来像这样：

const components = {
  code_block: (props) => {
    return <Codeblock children={props.children} language={props.lang} />;
  },
};

最后一步是在我们的TinaMarkdown中使用这些components。为此，我们将我们的组件对象传递给组件的prop components={components}，我们的TinaMarkdown将如下所示：

<TinaMarkdown content={props.data.post.body} components={components} />

现在，你可以使用yarn dev启动并导航回http://localhost:3000/post/HelloWorld。你会看到我们的代码块现在有了Prism语法高亮。

你可以在我们的GitHub示例仓库中找到完整的代码

你可以在哪里了解Tina的最新动态？

你知道你会想成为这个充满创造力、创新性、支持性的开发者社区（甚至还有一些编辑和设计师）的一部分，他们每天都在实验和实施Tina。

Tina社区Discord

Tina有一个社区Discord，里面充满了Jamstack爱好者和Tina爱好者。加入后你会发现一个地方：

获取问题帮助
找到最新的Tina新闻和抢先预览
与Tina社区分享你的项目，并谈论你的经验
聊聊Jamstack

Tina Twitter

我们的Twitter账号（@tinacms）宣布Tina的最新功能、改进和抢先预览。如果你在你构建的项目中标记我们，我们也会非常兴奋。

Last Edited: January 20, 2022

设置