标签: markdown-it

我正在使用 markdown-itnuxt将我的文章内容 ( rich text)呈现为htmlfrom strapi。文本呈现但不包括段落之间的间距。我可以<br>在富文本编辑器上使用标记strapi来创建换行符，但不应strapi自动执行此操作？

 <div v-html="$md.render(articles.content || 'No content available')"></div>

我用来@nuxtjs/markdownit解析 markdown 文件，我想在'markdown-it-anchor'插件中启用创建永久链接功能，我使用了以下代码nuxt.config.js但不起作用：

  modules: [\n    // Doc: https://axios.nuxtjs.org/usage\n    '@nuxtjs/axios',\n    '@nuxtjs/markdownit'\n  ],\n  markdownit: {\n    preset: 'default',\n    linkify: true,\n    breaks: true,\n    typographer: true,\n    html: false,\n    use: [\n      'markdown-it-anchor',\n      'markdown-it-attrs',\n      'markdown-it-div',\n      'markdown-it-toc-done-right',\n      'markdown-it-emoji'\n    ]\n  },\n  'markdown-it-anchor': {\n    level: 1,\n    // slugify: string => string,\n    permalink: true,\n    // renderPermalink: (slug, opts, state, permalink) => {},\n    permalinkClass: 'header-anchor',\n    permalinkSymbol: '\xc2\xb6',\n    permalinkBefore: true\n  },\n

我正在开发 vscode 的语言扩展。我定义了一个 tmLanguage 文件，一切运行良好。在悬停功能中，使用vscode.MarkdownString.appendCodeblock()markdown 被正确解释，并且我的自定义语言的语法突出显示可以开箱即用，通过执行以下操作：

const content = new MarkdownString("", true)
content.appendMarkdown("## Examples: \n")
content.appendCodeblock(examples, "lmps")

其中examples包含我的自定义语言的一些示例代码，"lmps"是我的语言标识符。（图像悬停示例）

我想知道是否有办法在网络视图中实现同样的事情。我成功地在 webview 中显示了content，将 markdownString 编译成 html：

async function set_doc_panel_content(panel: DocPanel | undefined, md_content: vscode.MarkdownString) {
        const html: string = await vscode.commands.executeCommand('markdown.api.render', md_content.value) as string;
        panel!.webview.html = html;
    }

到目前为止一切都很好，但是通过这种方式，Markdown 不知道我的自定义语言，并且不做任何语法突出显示。（示例图像 Webview）现在，我了解到向 Markdown 扩展添加语言支持可以通过在激活函数中返回一个对象来贡献一个 markdown-it 插件来实现。

export function activate(context: vscode.ExtensionContext) {

...

    return {
        extendMarkdownIt(md: any) {
          return md.use(require('markdown-it-emoji'));
        }
} …

我试图为我的博客开发一个新功能，即用于撰写文章的 Markdown 编辑器。

我选择了@tailwindcss/typographymarkdown -it来做到这一点，所以这是我的全部依赖项：

包.json

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": "^12.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@tailwindcss/typography": "^0.4.1",
    "autoprefixer": "^10.3.2",
    "babel-loader": "^8.2.2",
    "css-loader": "^6.2.0",
    "dotenv-webpack": "^7.0.3",
    "html-webpack-plugin": "^5.3.2",
    "postcss": "^8.3.6",
    "postcss-cli": "^8.3.1",
    "postcss-loader": "^6.1.1",
    "style-loader": "^3.2.1",
    "tailwindcss": "^2.2.7",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0"
  }
}

下面的代码是该功能的组件，包括编辑区域和预览区域。然而，这并没有奏效。

当我运行此代码时，它会像这样呈现，而无需印刷<h1>标签。

但是，如果我md.render(markdown)用<h1>hello</h1>（降价-它的渲染结果）替换，它似乎“有效”，看起来像这样。

编辑器.jsx

{
 "dependencies": {
    "firebase": "^9.0.0-beta.7",
    "markdown-it": …