### 如何在
Markdown 中正确渲染
代码块
为了确保 Vue3 应用程序能够正确渲染带有高亮显示的
代码块，需遵循特定的方法来配置项目环境。
#### 安装必要的依赖包
通过命令行工具安装 `marked` 和其他辅助库可以实现这一目标。这些库负责解析
Markdown 文本并应用合适的样式到最终呈现的内容上：
```bash
npm install marked marked-highlight github-
markdown-css highlight.js
```
此操作会下载所有必需的资源文件以便后续处理[^1]。
#### 配置组件以
支持代码高亮
为了让代码片段能够在页面加载时自动获得着色效果，在创建 Vue 组件之前还需要做一些准备工作。具体来说就是引入上述提到过的 CSS 文件以及初始化 JavaScript 插件实例化对象。
```javascript
import hljs from 'highlight.js';
import 'github-
markdown-css/github-
markdown.css';
// 使用 marked 解析
markdown 并启用高级特性如语法加亮
const renderer = new marked.Renderer();
renderer.code = (code, language) => {
if (language && hljs.getLanguage(language)) {
try {
return `<pre class="hljs"><code>${hljs.highlight(code, { language }).value}</code></pre>`;
} catch (_) {}
}
return `<pre><code>${marked.utils.escape(code)}</code></pre>`;
};
export default {
name: "
MarkdownViewer",
props: ["content"],
mounted() {
this.renderedContent = marked.parse(this.content, { renderer });
},
data() {
return {
renderedContent: ""
};
},
template: `
<div v-html="renderedContent"></div>
`
};
```
这段代码展示了如何定义一个新的 Vue 组件用于展示经过处理后的 HTML 版本
Markdown 内容，并且其中包含了对不同编程语言的
支持。
#### 实际使用案例
当开发者想要在一个 `.vue` 单文件组件内嵌入一段 Python 脚本作为例子时，只需按照如下方式书写即可让其被正确识别和美化：
```
markdown
以下是简单的Python函数示例:
\`\`\`python
def hello_world():
print("Hello world!")
\`\`\`
```
注意这里使用了三个反引号（即 \`），并且指定了紧跟在其后面的编程语言名称 python 来帮助解释器理解所要应用的颜色方案。
本文详细列举了代码高亮插件所支持的各种编程语言及其对应的关键词和调用的JS文件，覆盖了从AppleScript到Objective-C，从Shell到Swift等广泛的技术领域，为开发者提供了全面的代码展示解决方案。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
