前言

在前端开发中，常常需要在文本编辑器中编辑 Markdown 格式的文本，但是在不同的平台上，Markdown 的渲染效果会有差异。因此，我们需要一个通用的样式表来使 Markdown 的渲染效果在各个平台上保持一致，并且是跨浏览器兼容的。

gfm.css 就是这样一个通用的样式表，它基于 GitHub Flavored Markdown，提供了一套标准化的渲染样式。使用 gfm.css，可以使 Markdown 的渲染效果在不同的平台上表现一致，并且支持语法高亮、代码块渲染等功能。

本篇文章将介绍如何使用 npm 包 gfm.css，并给出一些样例代码以供参考。

安装 gfm.css

在使用 gfm.css 之前，需要先安装它。可以通过 npm 安装：

npm install gfm.css

安装后，就可以在项目中使用了。

在 HTML 文件中，可以通过以下方式引入 gfm.css：

<link rel="stylesheet" href="node_modules/gfm.css/gfm.css">

gfm.css 是一个单文件样式表，没有任何依赖，可以直接使用。

下面是一个简单的 Markdown 文本，使用 gfm.css 渲染后的效果：

Markdown:

# 标题1
## 标题2
### 标题3

普通文本

渲染效果：

普通文本

gfm.css 支持语法高亮，可以渲染多种编程语言。下面是一个渲染 Python 代码块的示例：

Markdown:

```python
def foo():
    print('Hello, world!')

foo()

**渲染效果：**

```python
def foo():
    print('Hello, world!')

foo()

gfm.css 支持渲染表格，可以根据不同的语法渲染不同的表格。下面是一个渲染基本表格的示例：

Markdown:

| Column1 | Column2 | Column3 |
| --------- | --------- | --------- |
| Cell1 | Cell2 | Cell3 |
| Cell4 | Cell5 | Cell6 |

渲染效果：

Column1	Column2	Column3
Cell1	Cell2	Cell3
Cell4	Cell5	Cell6

gfm.css 是一个非常实用的 CSS 样式表，可以使 Markdown 的渲染效果在不同的平台上表现一致，并且支持语法高亮、表格渲染等功能。

在使用 gfm.css 时，只需要安装并引入样式表，就可以让 Markdown 文本呈现出一致美观的渲染效果。

如果您对 Markdown 的渲染效果有要求，那么 gfm.css 是一个不错的选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/201546