在前端开发中，经常需要将代码段呈现在页面上进行展示或解释。而 @gerhobbelt/markdown-it-samp 是一款能够简单易用地在 Markdown 中呈现代码样式的 npm 包，本文将详细介绍如何使用该包。
安装
使用 npm 安装 @gerhobbelt/markdown-it-samp：
npm install @gerhobbelt/markdown-it-samp
使用
使用 @gerhobbelt/markdown-it-samp 需要两个步骤：安装插件和使用插件。
安装插件
我们可以使用以下代码来安装插件：
const markdownIt = require('markdown-it');
const markdownItSamp = require('@gerhobbelt/markdown-it-samp');
const md = markdownIt().use(markdownItSamp);使用插件
安装完成后，我们就可以使用插件来呈现代码段。例如，要呈现以下 Markdown 代码：
这是代码段：
```js
console.log('Hello World!');-- -------------------- ---- ------- --------------- ----- ----- ------ - ----------------- -------- ------------------ --------- ------ --- --------------------
输出：
这是代码段：
<pre><samp class="lang-js">
console.log('Hello World!');
</samp></pre>如此一来，我们就成功地将代码端呈现在页面上了。
支持的语言
当前，@gerhobbelt/markdown-it-samp 支持以下语言：
- JS
- HTML
- XML
- SVG
- Bash
- SQL
- Markdown
如果想添加其他语言支持，可以在初始化时通过 options 配置：
const md = markdownIt().use(markdownItSamp, {
langPrefix: 'language-',
allowedLang: ['js', 'html', 'xml', 'svg', 'bash', 'sql', 'markdown', 'your-language']
});其中，langPrefix 和 allowedLang 分别为语言前缀和允许的语言数组。这里，我们添加了一个叫做“your-language”的新语言。
总结
经过本文的介绍，我们已经学会了如何使用 @gerhobbelt/markdown-it-samp 在 Markdown 中呈现代码样式，并且添加了对其他语言的支持。这对于前端开发来说是一个很有用的工具，也是有很大指导意义的。
完整示例代码：
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- -------------- - ---------------------------------------- ----- -- - --------------------------------- ----- ------ - ----------------- -------- ------------------ --------- ------ --- --------------------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02c870403f2923b035bd8c