前端直接使用markdown Nodejs

前端直接使用markdown Nodejs

请问各位大神怎么在前端直接使用markdown？？或者有没有在前段直接使用markdown支持比较友好的库？？
我试了：evilstreak/markdown-js的客户端的例子，发现在代码处理这块根本就不行不过其他的倒都是还可以，可我主要就是用代码这块的，
也看了这个的：https://github.com/coreyti/showdown 请问各位大神还有没有好点的库推荐下啊？


7 回复

前端直接使用 Markdown（Node.js）

问题描述

在前端项目中，我们经常需要将 Markdown 文本渲染成 HTML。但如何在前端直接使用 Markdown 呢？有没有比较友好的库来支持这种需求，尤其是在处理代码块时？

解决方案

你可以使用一些流行的 Markdown 渲染库来实现这一目标。这里推荐两个常用的库：marked 和 remarkable。

使用 marked

marked 是一个高性能的 Markdown 解析器和编译器，它支持多种扩展功能，并且对代码块的处理也非常友好。

  1. 安装

    npm install marked

  2. 基本用法

    import marked from 'marked';

const markdownText = `
# Hello, Markdown!

Here is some code:

\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;

const html = marked(markdownText);
document.getElementById('content').innerHTML = html;

  3. 自定义渲染器

    如果你需要更灵活的渲染方式，可以使用自定义渲染器：

    import marked from 'marked';

const renderer = new marked.Renderer();
renderer.code = function(code, language) {
  return `<pre><code class="${language}">${code}</code></pre>`;
};

marked.setOptions({
  renderer: renderer,
  gfm: true,
  tables: true,
  breaks: false,
  pedantic: false,
  sanitize: false,
  smartLists: true,
  smartypants: false
});

const markdownText = `
# Hello, Markdown!

Here is some code:

\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;

const html = marked(markdownText);
document.getElementById('content').innerHTML = html;
使用 remarkable

remarkable 是另一个轻量级且易于使用的 Markdown 解析器，同样支持代码块的高亮显示。

  1. 安装

    npm install remarkable

  2. 基本用法

    import Remarkable from 'remarkable';

const md = new Remarkable();

const markdownText = `
# Hello, Markdown!

Here is some code:

\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;

const html = md.render(markdownText);
document.getElementById('content').innerHTML = html;

  3. 自定义渲染器

    remarkable 允许你通过插件系统来自定义渲染行为：

    import Remarkable from 'remarkable';
import hljs from 'highlight.js'; // 引入代码高亮库

const md = new Remarkable({
  html: true,
  breaks: false,
  langPrefix: 'language-' // 设置代码块语言前缀
}).use(require('remarkable-include'), { root: './' }) // 使用 include 插件
  .use(require('remarkable-footnote'))
  .use(require('remarkable-ins'))
  .use(require('remarkable-mark'));

hljs.initHighlightingOnLoad(); // 初始化代码高亮

const markdownText = `
# Hello, Markdown!

Here is some code:

\`\`\`javascript
console.log('Hello, World!');
\`\`\`
`;

const html = md.render(markdownText);
document.getElementById('content').innerHTML = html;

总结

以上两种方法都可以很好地解决在前端使用 Markdown 的问题，特别是在处理代码块时。你可以根据自己的需求选择合适的库。希望这些示例代码能帮助你快速上手！


Marked https://github.com/chjj/marked#options-1

+1

marked 相比 showdown，优势在哪里？

谢谢你了！

marked +1

要在前端直接使用 Markdown，可以使用一些专门针对浏览器环境优化的库。其中，marked 和 showdown 是两个非常流行的选择。由于你提到对 showdown 不太满意，我们这里重点介绍如何使用 marked。

示例代码

首先，你需要在项目中安装 marked 库：

npm install marked

然后，在你的 JavaScript 文件中引入并使用它：

import marked from 'marked';

const markdownText = `
# 这是一个标题
这是一个段落。
\`\`\`javascript
function helloWorld() {
    console.log("Hello, world!");
}
\`\`\`
`;

const htmlContent = marked(markdownText);

document.getElementById('markdown-container').innerHTML = htmlContent;

在这个例子中，我们定义了一个 Markdown 字符串 markdownText，包含了标题、普通文本和一段代码。marked 函数将 Markdown 转换为 HTML，并将其插入到 ID 为 markdown-container 的 DOM 元素中。

解释

  • marked: 这是一个高性能的 Markdown 解析器和编译器，专为浏览器环境设计。它的 API 简单，性能优秀，支持多种 Markdown 扩展。

  • innerHTML: 用于将生成的 HTML 内容插入到页面中。这是前端开发中常用的方法之一，但需要注意潜在的安全问题（如 XSS 攻击），建议在内容可信的情况下使用。

如果你希望进一步自定义渲染效果或支持特定的 Markdown 扩展，可以查看 marked 的文档来调整解析选项或编写自定义的渲染函数。

总之，marked 应该能满足你在前端直接使用 Markdown 的需求，特别是对于代码块的渲染。

回到顶部