Nuxt.js 4 (Nux4) 使用 markdown-it 渲染 Markdown

安装

yarn add highlight.js
yarn add markdown-it
yarn add -D @types/markdown-it

制作 Nuxt 插件 plugins，文件路径为 app/plugins/markdownit.ts

// app/plugins/markdownit.ts
import md from "markdown-it";
import hljs from "highlight.js";
import type MarkdownIt from "markdown-it";

export default defineNuxtPlugin(() => {
  const renderer: MarkdownIt = md({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return (
            '<pre><code class="hljs">' +
            hljs.highlight(str, { language: lang, ignoreIllegals: true })
              .value +
            "</code></pre>"
          );
        } catch (__) {}
      }

      return (
        '<pre><code class="hljs">' +
        renderer.utils.escapeHtml(str) +
        "</code></pre>"
      );
    },
  });

  const md2Html = (mdtext: any) => {
    return typeof mdtext != "string"
      ? mdtext
      : (renderer.enable("linkify"), renderer.render(mdtext));
  };

  return {
    provide: {
      mdRenderer: md2Html,
    },
  };
});

在日常的 components 中使用

const content = `# hello www.twle.cn #`
const mdtext = $mdRenderer(content);

添加样式

平时怎么加就怎么加吧