DEV 评论和帖子的格式化代码

您是否想过如何在 dev.to 上的评论和帖子中获得良好的代码格式？

以下是一个例子：

const myMethod = (a, b) => {
   return a + b
}

诀窍在于，所有开发者的评论和帖子都支持 Markdown！所以我们可以使用 Markdown 代码语法高亮的方法，将代码包裹在三个反引号中，就像这样：

```
const myMethod = (a, b) => {
   返回 a + b
}
```

然而，这只完成了一半。输出如下：

const myMethod = (a, b) => {
   return a + b
}

为了实现语法高亮，我们还需要在反引号后指定要编写的语言。在本例中，指定语言是 javascript：

```javascript
const myMethod = (a, b) => {
   返回 a + b
}
```

现在我们有了：

const myMethod = (a, b) => {
   return a + b
}

万岁！

一些值得注意的受支持的词法分析器

DEV 使用rouge-ruby进行语法高亮，因此我们可以查看这些文档以获取受支持语言的完整列表

该列表中有几个有趣的词法分析器，例如jsx（与不同javascript）：

const myVariable = "abc"
return <p>{myVariable}</p>

并且，如果第一个字符是、或空格，diff则每行将变为红色、绿色或白色：-+

```差异
+ const newMethodName = (a, b) => {
- const myMethod = (a, b) => {
    返回 a + b
 }
```

给我们：

+ const newMethodName = (a, b) => {
- const myMethod = (a, b) => {
    return a + b
 }

我无法弄清楚的事情

有几件事我想做但却想不出来——所以如果有人知道如何实现这些事情，我洗耳恭听！

1. 突出显示某些行

一些 markdown 处理器允许您添加行号来突出显示代码块；但据我所知，rouge 默认不具备该功能。

2. 添加额外样式

当我无法让行高亮功能正常工作时，我曾想过尝试在 Markdown 中添加自己的 CSS 样式来实现这一点——但我也不知道该怎么做。我猜想 Rouge 在渲染 Markdown 之前会删除所有样式和其他属性。

3. 行号

似乎没有办法显示行号。我能想到的唯一真正方法是直接将它们作为行的第一个字符添加到代码中，如下所示：

```javascript
1 const myMethod = (a, b) => {
2 返回 a + b
3 }
```

这确实有效：

1 const myMethod = (a, b) => {
2    return a + b
3 }

但它确实增加了一个额外的步骤。

我如何在这篇文章中展示反引号

好的，如果三个反引号自动启动一个代码块 - 那么我该如何像这样在整篇文章中显示它们呢？

```javascript
console.log(“WAT”)
```

诀窍是先将它们包裹在<pre>HTML 标签中 - 然后标签会将其中的内容渲染为一个块本身。如下所示：

<pre>

```javascript
console.log(“WAT”)
```

</pre>

现在有点需要思考了……我该如何让这两个符号<pre>和反引号都出现在那个代码块里呢？这可不是随便用一个代码块包装一下那么简单<pre>……来吧——试试看 :)

🤯

希望有帮助！

喜欢这篇文章吗？
您可以通过以下方式找到更多内容：

• 在 Twitter 上关注我：@chrisachard
• 订阅新闻通讯：chrisachard.com

感谢阅读！