问题标签 [markdown-it]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 突出显示 js 应用类但不应用样式
似乎highlight.js
将类应用于我的内容,而不是样式。我正在使用React
,TypeScript
和markdown-it
.
这是我对 package.json 的更改:
这是我的降价文件:
这是我认为在 html 中呈现降价的 React 组件的相关部分。我不是很擅长 Typescript,所以我现在将参数的类型设置为字符串。我不知道在哪里可以找到 lang 的类型定义。
这是呈现的html:
呈现的 html 看起来完全简单,没有语法突出显示。
javascript - 如何用 span 标签替换特定的文本环绕字符?
期望的行为
替换::text::
为<span>text</span>
。
例如,给定一个字符串,如:
如何用这样的打开和关闭标签::
替换字符:<span>
我试过的
我实际上是在尝试复制以下行为:
https://www.npmjs.com/package/markdown-it-span
一个非常有用的markdown-it 解析器的插件,因为它似乎有一个错误(我无法弄清楚如何修复),这已在此处的一个问题中进行了讨论:
代码中有一个错误导致创建 span 标签两次。
此外,输入 like
http:
被转换为http::
.
编辑:
我刚刚在这里遇到了类似的问题,可能有答案...
vue.js - 如何在 Vuepress 中添加自定义块/容器?
我在 VuePress 中建立了一个网站,发现它支持 markdown-它的 :::danger、:::tip、:::info 等来生成自定义容器。我想知道这是否可以以某种方式扩展,例如使用 :::card 或 :::example 或任何你想要的。
我找到了https://github.com/posva/markdown-it-custom-block,但不知道如何实现它。
这就是我的 config.js 中的内容
非常感谢任何建议!
pug - 如何修复我的 pug 包含的降价文件中损坏的图像链接?
我只需要重新设置降价中的传入链接,以便它们与 pug 文档相关
结构体
哈巴狗
降价
我真的不想将我的 markdown 链接更改为articles/my-image.jpg
,因为这会破坏 markdown 预览以进行编辑,这将是一个糟糕的开发人员体验
vuepress - VuePress:如何修改降价内容
VuePress (v1) 提供了这个 API 来访问页面上下文:https ://v1.vuepress.vuejs.org/plugin/option-api.html#extendpagedata
我可以访问这些属性,但我不能更改_content
例如的值。
我想在它被Vue渲染之前修改(替换一些正则表达式)markdown(甚至在它被markdown解析器解析之前)。
也许使用chainmarkdown API使用 markdown-it 插件更有意义,但我不知道具体如何。但问题更多的是如何为Markdown 编写一个插件,它可以在解析之前修改内容,因为我需要原始文本。
vue.js - 如何在 Nuxt 中使用 Markdownit 模块
我正在使用 Nuxt、Vuetify 和 Storyblok。当我想显示来自 storyblok 的降价时,我遇到了问题。我尝试使用Markdownit模块。
首先我使用 npm 安装它,然后导入到模块并与 v-html 一起使用,但仍然没有得到预期的结果。我做错了什么?
结果
nuxt.js - 未找到资产中的 Nuxt markdownit 图像
我有一个 nuxt markdownit 页面,“foo.vue”:
并且该文件存在:
但是当我编译它时,我得到一个错误:
我究竟做错了什么?我假设我没有以某种方式正确配置加载程序。
的相关部分nuxt.config.js
是这样的:
markdown - 是否可以在 VuePress 中的 frontmatter 或配置文本(themeConfig)中使用标记?
VuePress 中的一些文本取自页面的 frontmatter 或一些配置,例如.vuepress/config.js
. 特别是在 themeConfig(默认主题)中,您可以指定例如语言环境的selectText
. 我想在那里使用图像(语言的标志)。
但是,似乎不支持任何标记:HTML 被转义并且 markdown 没有被转换。
我尝试将表情符号标志用于语言,但这些标志在所有浏览器中看起来并不好。
那么,有没有办法在这些地方使用某种标记?
是否有一些钩子可以注入一些渲染函数来适应这些文本?
(或者我需要提交功能请求吗?;-))
javascript - 如何在 markdown-it 中的 C++ 代码中正确显示尖括号?
我正在尝试将 markdown-it.js 与 nodejs 一起使用来呈现包含一些 c++ 代码的 markdown 页面。
这是 javascript 代码,它转换 body 标记中的所有内容:
这是降价 html 文档:
一切都按照我的预期呈现,除了在 c++ 代码中流/移位运算符呈现为 < ;
javascript - 在浏览器中呈现时,为 Nuxt 应用程序创建自定义 Markdown-it 插件会导致 TypeError
我正在创建一个呈现 markdown(使用 markdown-it)的 Nuxt.js 应用程序(使用 npx 和 create-nuxt 创建)。我为 markdown-it 创建了一个插件。该插件位于“helpers”目录中。
nuxt.config.js
我的插件是'../helpers/MarkdownNGH'。我还添加了另一个插件 markdown-it-div 进行测试。该插件与 npm 一起安装。
助手/MarkdownNGH
现在,当我运行npm run dev
服务器端渲染时,它应该正常工作,我的插件编辑降价渲染。
问题出现在浏览器端。在浏览器中加载页面会导致控制台中出现以下错误消息:
在我生成的 app.js 中有以下代码,所以它在编译中。
我复制了 markdown-it-div 的开发方式(https://github.com/kickscondor/markdown-it-div/blob/master/index.js),它在服务器端渲染和浏览器中都可以正常工作. 我对 webpack 和有关它的东西非常陌生,所以这可能只是某种配置问题等。
编辑:我试过这个:https : //stackoverflow.com/a/56283408/216846 所以将 .babelrc 更改为
但这没有帮助。不知道我这样做是否正确。