如何使用md-block在网页上呈现Markdown

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《如何使用md-block在网页上呈现Markdown》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

Markdown 的简单语法使其成为 HTML 的绝佳替代品。 该语言一直支持 HTML 的嵌入，但现在您可以另辟蹊径，在 HTML 中嵌入 Markdown。

使用一个简单的库，您可以在您的网页中托管嵌入式 Markdown，并即时将其转换为正确的 HTML。

md-block 有什么作用？

您当前的过程可能涉及手动创建 Markdown 文件，然后将它们转换为 HTML。 这就是现代 CMS 应用程序的工作量。 或者你可以使用像 Angular 这样的框架来将 Markdown 渲染到页面中。

md-block 库并不是严格的替代方案。 相反，它满足了一个稍微不同的用例。 它将内联 Markdown 转换为等效的 HTML。 您可以在 HTML 文件中嵌入 Markdown 并在请求时将其呈现在客户端上。

这可能是这样的：

...

# Heading
Some *embedded* Markdown which `md-block` can convert for you!

该库引入了自己的自定义 HTML 元素， md块. 尽管此元素不是 HTML 标准的一部分，但这是一种有效的技术。 Web 组件标准 (MDN) 包括一个称为自定义元素的 API。 此 API 支持使用 JavaScript 动态注册自定义元素。

在加载 md-block 库之前，此页面将以熟悉的方式呈现：

当然，您可以设置 md-block 元素的样式，使其看起来更像在文本编辑器中。 使用预格式化的空格和等宽字体，它至少更容易阅读：

如果您正在编写有关 Markdown 的教程，您可能需要这种输出。 它允许您解释 Markdown 语法，同时让您轻松编辑示例 Markdown：

但是 md-block 的派对技巧是将 Markdown 转换为最终的 HTML。

即使使用默认浏览器样式，内容现在也会像常规 HTML 一样显示，即使您将其作为 Markdown 发送到浏览器：

如何使用 md-block

将 md-block 库添加到页面后，您可以将 Markdown 写入 md块 元素。 然后该库将自动格式化您的 Markdown，您可以根据需要继续嵌入 Markdown。

然而，这个过程有一些变化。

远程获取脚本或自行安装

最简单的入门方法是从官方 md-block 网站引用该库：

这可能不是最有效的方法，但绝对是最快的。 只需将此代码添加到您的 头 并且您的页面将自动将 md-block 元素中的任何内容呈现为 HTML：

当然，您可以下载该 JavaScript 文件并将其托管在您自己的网站上。 或者你可以通过 npm 安装它：

npm install md-block

Markdown 块与内联 Markdown

以库本身命名的默认元素是 md块. 但你也可以使用 md跨度 内联 Markdown 的元素，例如句子中间的文本：

内联 Markdown 的用例可能不太常见，但您仍然可以使用它：

An HTML paragraph containing *italic* text.

如何使用 Prism 语法高亮 Markdown 代码块

Prism 是 md-block 的创建者 Lea Verou 共同创建的语法荧光笔。 您可以使用它来突出显示网页中预格式化的代码块，包括 md-block 生成的代码块。

因此，使用此 HTML：

```javascript
functionsquare(number) {
return number * number;
}
```

您将看到带有语法意识突出显示的格式良好的代码：

您在线写作的选择增加了

如何使用 md-block 取决于您，但使用它的创造性解决方案有很大潜力。 您可以使用它为有信心使用 Markdown 而不是 HTML 的作者运行一个非常轻量级的 CMS。

Markdown 是适合普通观众的完美语言。 它被 Slack 等工具采用很可能会进一步增加使用率。

推荐：如何在Ubuntu中使用命令行启动XAMPP

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~