在 GitHub 风格的 Markdown 中突出显示 React 代码

介绍

自 2004 年发布以来，Markdown 已成为最受欢迎的标记语言之一。由于 Markdown 轻量级、简单易用且可跨平台使用，技术作家广泛使用 Markdown 编写博客、文章、文档等；甚至本指南也是在幕后用 Markdown 编写的。

GitHub 使用自己的 Markdown 版本，称为GitHub Flavored Markdown，使用户能够与其他用户交互、引用问题或拉取请求。即使您的项目或存储库不包含任何 Markdown 或.md文件，您仍必须使用 Markdown 来记录 README、问题、拉取请求、要点等。

很多时候，您会在 Markdown 中嵌入代码片段或代码块。例如，在报告错误时嵌入代码可以节省时间并帮助审阅者、维护者或任何看到该问题的人。您还可以根据编程语言突出显示代码，以提高代码的可读性和上下文。

在本指南中，我们将讨论如何在 GitHub Flavored Markdown 中插入和突出显示 React 代码。

插入代码

您可以通过缩进代码四个空格或使用隔离代码块在 GitHub Flavored Markdown (GFM) 中插入代码。

例如，这里有一个简单的快速服务器的示例代码。

      const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});
    

将此代码复制并粘贴到任何 GitHub 存储库或要点中的.md文件中，然后提交更改。此 Markdown 文件的外观如下：

由于您没有包含任何缩进或隔离的代码块，GFM 将代码视为常规文本。您可以在此处查看此 GitHub 要点。

现在将整个代码缩进四个空格。您会注意到，一旦缩进代码，代码块就会消失。

现在提交此更改，您将看到 Markdown 这次将格式化代码块。

围栏代码块

您还可以通过在代码块前后放置三个反引号（ “```” ）来在 Markdown 中插入代码。请注意，与上次一样，代码将在三个反引号内淡出。

这个 Markdown 文件的样子如下：

您可以在此处找到此示例要点。

突出显示代码

突出显示的代码如下所示：

您可以在此处找到此示例要点。

类似地，您可以突出显示用其他编程语言（如 Ruby、Python 等）编写的代码。

React 是一个 JavaScript 框架，或者严格意义上来说是一个库，因此在三个反引号后添加javascript应该可以正常工作，并突出显示代码。在```后添加javascript确实可以突出显示代码，但它是将其视为 JavaScript 代码来实现的。

由于 React 使用JSX来突出显示 React 代码，因此在三个反引号后应该使用jsx而不是javascript 。

下面是一个示例 React 代码，说明了这一点。

      import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
           Hello World!
    </div>
  );
}

export default App;
    

首先，在三个反引号后添加了javascript 。

以下是此代码的突出显示方式。

您可以在此处找到此示例要点。

现在，jsx被添加到三重反引号后面。

这是这次代码的突出显示方式。

您可以在此处找到此示例要点。

虽然差别很小，但你可以看到突出显示是如何根据'''之后javascript和jsx的使用而改变的。

一般来说，最好使用jsx来突出显示 React 代码。即使在本指南中，上面的代码块中也使用了jsx来突出显示 React 代码。

结论

在本指南中，我们讨论了如何使用缩进和隔离代码块在 GitHub Flavored Markdown 中插入代码。我们还讨论了如何在 GitHub Flavored Markdown 中突出显示 JavaScript 和 React 代码。

以下是一些可能对您有用的资源：

祝你编码愉快！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文