当前位置：首页 > JavaScript

js 实现markdown

2026-02-02 09:35:39JavaScript

以下是在 JavaScript 中实现 Markdown 解析和渲染的几种常见方法：

使用现成的 Markdown 解析库

marked 是一个流行的 Markdown 解析库，使用简单且功能强大：

const marked = require('marked');
const html = marked.parse('# Hello Markdown!');
console.log(html);

使用 highlight.js 添加代码高亮

结合 marked 和 highlight.js 可以实现代码块的高亮显示：

const marked = require('marked');
const hljs = require('highlight.js');

marked.setOptions({
  highlight: function(code, lang) {
    return hljs.highlight(lang, code).value;
  }
});

自定义 Markdown 解析器

如果需要自定义解析逻辑，可以使用正则表达式实现基础功能：

function parseMarkdown(markdown) {
  // 标题
  markdown = markdown.replace(/^# (.*$)/gm, '<h1>$1</h1>');
  // 加粗
  markdown = markdown.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
  // 链接
  markdown = markdown.replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>');
  return markdown;
}

在浏览器中实时渲染

使用 textarea 和 div 实现实时 Markdown 预览：

<textarea id="markdown-input"></textarea>
<div id="markdown-preview"></div>

<script>
document.getElementById('markdown-input').addEventListener('input', function(e) {
  document.getElementById('markdown-preview').innerHTML = 
    marked.parse(e.target.value);
});
</script>

支持 GitHub Flavored Markdown

使用 remark 和 rehype 处理更复杂的 Markdown 语法：

import { unified } from 'unified';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import rehypeStringify from 'rehype-stringify';

const file = await unified()
  .use(remarkParse)
  .use(remarkRehype)
  .use(rehypeStringify)
  .process('# Hello\n\n- List item');

console.log(String(file));

这些方法涵盖了从简单到复杂的各种 Markdown 处理需求，可以根据项目要求选择合适的实现方式。

js 实现markdown