让你的系统支持markdown

svygh123

已于 2024-07-30 09:15:28 修改

阅读量270

点赞数 2

分类专栏：编程文章标签： markdown 博客

于 2024-07-29 21:10:16 首次发布

本文链接：https://blog.csdn.net/svygh123/article/details/140781231

版权

编程专栏收录该内容

140 篇文章 1 订阅

订阅专栏

Markdown-it 是一个非常流行且高效的 Markdown 解析器，它使用 JavaScript 编写，并且可以在浏览器和 Node.js 环境中运行。Markdown-it 被设计成易于使用、高度可定制，并且具有出色的性能。

主要特点

高性能:
- Markdown-it 旨在提供最快的解析速度之一，这对于处理大量 Markdown 内容尤其重要。
易于使用:
- Markdown-it 的 API 简洁明了，易于理解。
高度可定制:
- Markdown-it 支持多种插件，允许开发者轻松扩展 Markdown 的语法或修改渲染行为。
跨平台:
- Markdown-it 可以在浏览器和 Node.js 环境中运行，非常适合构建 Web 应用和服务端应用。
支持多种输出格式:
- 默认情况下，Markdown-it 输出 HTML，但也可以通过插件支持其他输出格式，如 LaTeX 或纯文本。
灵活的配置:
- Markdown-it 允许开发者通过配置选项来微调解析行为。

一、markdown-it在浏览器使用

在浏览器中使用 Markdown-it 需要将 Markdown-it 和相关插件作为浏览器脚本引入，并且确保它们能够在浏览器环境中运行。下面是一个简单的示例，说明如何在浏览器中使用 Markdown-it 和 markdown-it-highlight 插件来渲染 Markdown 文本并实现代码高亮。

步骤 1: 引入必要的库

引入 Markdown-it:
- 你可以通过 CDN 直接引入 Markdown-it。
引入 markdown-it-highlight 和 highlight.js:
- 同样可以通过 CDN 引入这些库。

步骤 2: 创建 HTML 文件

创建一个 HTML 文件，并在 <head> 中引入必要的库：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Markdown-it Browser Example</title>
  <!-- 引入 highlight.js 的样式 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
  <!-- 引入 Markdown-it 和 markdown-it-highlight -->
  <script src="https://unpkg.com/markdown-it/dist/markdown-it.min.js"></script>
  <script src="https://unpkg.com/markdown-it-highlight/dist/markdown-it-highlight.min.js"></script>
</head>
<body>
  <div id="content"></div>

  <script>
    // 创建 Markdown-it 实例并使用 markdown-it-highlight 插件
    const md = new window.MarkdownIt()
      .use(window.markdownItHighlight, {
        // 使用 highlight.js 作为高亮库
        highlight: (str, lang) => {
          if (lang && hljs.getLanguage(lang)) {
            try {
              return hljs.highlight(str, { language: lang }).value;
            } catch (__) {}
          }

          try {
            return hljs.highlightAuto(str).value;
          } catch (__) {}

          return ''; // 使用普通文本显示代码
        },
      });

    // 示例 Markdown 文本
    const markdownText = `
\`\`\`js
function helloWorld() {
  console.log('Hello, world!');
}
\`\`\`

\`\`\`css
body {
  background-color: #f0f0f0;
}
\`\`\`
`;

    // 渲染 Markdown 为 HTML
    const html = md.render(markdownText);

    // 将渲染后的 HTML 插入到页面中
    document.getElementById('content').innerHTML = html;

    // 初始化 highlight.js
    hljs.highlightAll();
  </script>
</body>
</html>

说明

引入库:
- 我们通过 CDN 引入了 Markdown-it、markdown-it-highlight 和 highlight.js。
- 同时引入了 highlight.js 的样式文件。
创建 Markdown-it 实例:
- 在 <script> 标签内创建一个 Markdown-it 实例。
- 使用 markdown-it-highlight 插件，并配置 highlight 函数来实现代码高亮。
渲染 Markdown 文本:
- 使用 Markdown-it 实例的 render 方法将 Markdown 文本转换为 HTML。
插入 HTML 到页面:
- 将渲染后的 HTML 插入到页面的 <div> 元素中。
初始化 highlight.js:
- 调用 hljs.highlightAll() 来确保所有的代码块都被高亮。

注意事项

确保你使用的库版本与示例中的版本一致，或者查看最新版本的文档以确认兼容性。
在使用 CDN 时，请确保 CDN 地址指向正确的资源版本。
如果你在开发过程中遇到问题，可以考虑使用本地开发服务器来避免跨域问题。

这样，你就能够在浏览器中使用 Markdown-it 来渲染 Markdown 文本，并实现代码高亮了。

二、markdown-it 在nodejs环境使用

安装

在 Node.js 项目中安装 Markdown-it，你可以使用 npm 或 yarn：

npm install markdown-it

或者

yarn add markdown-it

基本用法

以下是如何使用 Markdown-it 的基本示例：

const MarkdownIt = require('markdown-it');

// 创建 Markdown-it 实例
const md = new MarkdownIt();

// 将 Markdown 字符串转换为 HTML
const html = md.render('# Hello, world!');

console.log(html); // 输出: "<h1>Hello, world!</h1>"

配置选项

Markdown-it 提供了一系列配置选项来微调解析行为。例如，你可以禁用某些 Markdown 特性，或者启用一些额外的语法特性。

禁用特性

const md = new MarkdownIt({
  html: false, // 禁用 HTML 标签转义
  xhtmlOut: false, // 不输出 XHTML 自闭合标签
  breaks: false, // 不自动将换行符转换为 `<br>` 标签
  langPrefix: 'language-', // 代码块语言前缀
  linkify: true, // 自动识别链接
  typographer: false, // 启用智能引号等特性
  quotes: '“”‘’', // 指定智能引号字符
});

const html = md.render('This is *italic* and `code`.');

扩展 Markdown 语法

Markdown-it 支持通过插件来扩展 Markdown 语法。例如，你可以使用 markdown-it-abbr 插件来支持缩写语法。

const MarkdownIt = require('markdown-it');
const abbr = require('markdown-it-abbr');

const md = new MarkdownIt().use(abbr);

const html = md.render('[abbr](:abbr "abbreviation")');

console.log(html); // 输出: "<p><abbr title=\"abbreviation\">abbr</abbr></p>"

插件

Markdown-it 社区提供了许多插件来扩展 Markdown 的功能。以下是一些常见的插件：

markdown-it-abbr: 支持缩写语法。
markdown-it-footnote: 支持脚注语法。
markdown-it-mark: 支持高亮文本语法。
markdown-it-sub: 支持下标语法。
markdown-it-sup: 支持上标语法。
markdown-it-task-lists: 支持任务列表语法。
markdown-it-toc-done-right: 自动生成目录。

示例：使用 Markdown-it 插件

下面的示例展示了如何使用 markdown-it-footnote 插件来支持脚注语法：

const MarkdownIt = require('markdown-it');
const footnote = require('markdown-it-footnote');

const md = new MarkdownIt().use(footnote);

const html = md.render('Hello[^1].\n\n[^1]: Footnote.');

console.log(html); // 输出: "<p>Hello<sup id=\"fnref:1\"><a href=\"#fn:1\" rel=\"footnote\">1</a></sup>.</p>\n<section class=\"footnotes\">\n<hr />\n<ol>\n<li id=\"fn:1\"><p>Footnote.<a href=\"#fnref:1\" rev=\"footnote\">↩</a></p></li>\n</ol>\n</section>"

三、vue使用markdown-it

在 Vue.js 中使用 Markdown-it 是一个很好的方式来处理 Markdown 内容。你可以将 Markdown-it 作为一个独立的模块来使用，或者将其集成到 Vue 组件中以便更好地管理状态和交互。下面使用一个示例，说明如何在 Vue.js 中使用 Markdown-it 和 markdown-it-highlight 插件来渲染 Markdown 文本并实现代码高亮。

步骤 1: 安装依赖

首先，确保你已经安装了 markdown-it 和 markdown-it-highlight。如果你还没有安装，可以使用以下命令来安装：

npm install markdown-it markdown-it-highlight highlight.js

步骤 2: 创建 Vue 组件

接下来，我们将创建一个 Vue 组件来处理 Markdown 文本的渲染。

示例代码

<template>
  <div>
    <textarea v-model="markdownText" placeholder="Enter your Markdown text here..."></textarea>
    <button @click="renderMarkdown">Render Markdown</button>
    <div v-html="renderedHtml" class="markdown-content"></div>
  </div>
</template>

<script>
import MarkdownIt from 'markdown-it';
import markdownItHighlight from 'markdown-it-highlight';
import hljs from 'highlight.js';

export default {
  data() {
    return {
      markdownText: '',
      renderedHtml: ''
    };
  },
  methods: {
    renderMarkdown() {
      const md = new MarkdownIt()
        .use(markdownItHighlight, {
          highlight: (str, lang) => {
            if (lang && hljs.getLanguage(lang)) {
              try {
                return hljs.highlight(str, { language: lang }).value;
              } catch (__) {}
            }

            try {
              return hljs.highlightAuto(str).value;
            } catch (__) {}

            return ''; // 使用普通文本显示代码
          },
        });

      this.renderedHtml = md.render(this.markdownText);
    }
  }
};
</script>

<style scoped>
.markdown-content {
  white-space: pre-wrap;
  word-break: break-word;
}
</style>

说明

Vue 组件结构:
- 使用 <textarea> 输入框来输入 Markdown 文本。
- 使用 <button> 来触发渲染 Markdown 的方法。
- 使用 <div> 来显示渲染后的 HTML。
Markdown-it 实例:
- 创建一个新的 Markdown-it 实例，并使用 markdown-it-highlight 插件来实现代码高亮。
- 在 highlight 函数中使用 hljs 来高亮代码。
渲染 Markdown:
- 在 renderMarkdown 方法中，使用 Markdown-it 实例的 render 方法将 Markdown 文本转换为 HTML。
- 将渲染后的 HTML 设置为 <div> 的 v-html 属性。
样式:
- 使用 white-space: pre-wrap 和 word-break: break-word 来保持 Markdown 文本的格式。

注意事项

确保你已经在项目中安装了所有必需的依赖。
在 Vue.js 项目中，你可能还需要引入 highlight.js 的样式文件来确保代码高亮正常工作。你可以在主入口文件（通常是 main.js 或 app.js）中引入样式文件：
```
import 'highlight.js/styles/default.css';
```
如果你使用的是 Vue CLI，确保你已经配置了正确的别名或路径解析规则，以便正确导入模块。

这样，你就能够在 Vue.js 中使用 Markdown-it 来渲染 Markdown 文本，并实现代码高亮了。

总结

Markdown-it 是一个强大且灵活的 Markdown 解析器，适合用于各种应用场景，从简单的 Markdown 转换到复杂的文档生成工具。通过使用 Markdown-it，你可以轻松地定制 Markdown 的语法和渲染行为，以满足特定的需求。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nh7FxIop-1722302119079)(https://i-blog.csdnimg.cn/direct/b33c4be3c055440b8985e6f82df1c6d8.jpeg#pic_center)]

svygh123

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
让你的系统支持markdown

Markdown-it 是一个强大且灵活的 Markdown 解析器，适合用于各种应用场景，从简单的 Markdown 转换到复杂的文档生成工具。通过使用 Markdown-it，你可以轻松地定制 Markdown 的语法和渲染行为，以满足特定的需求。
复制链接

扫一扫