markdown-it 官方demo markdown-it 文档 1、配置highlightjs,针对markdown中各种语言高亮,针对对应的标签 pre code 里面的样式 -- index.js 2、 index.html 3.package.json 4、readme
<template> <div id="editor"> <div v-html="result"></div> {{result}} </div> </template> <script> import MarkdownIt from 'markdown-it' import hljs from 'highlight.js' import 'highlight.js/styles/agate.css' export default { name: 'editor', data() { return { md: MarkdownIt(...
--Markdown里代码解析后的标签--><pre><codeclass="lang-xml"><!--需要高亮显示的代码--></code></pre></body><script>hljs.initHighlightingOnLoad();</script> 使用这种就可以将静态的代码进行渲染,但是实际代码是经常会自动生成的 动态的代码 html <body><!--动态加载的标签--><pre><codeclass="la...
"@traptitech/markdown-it-katex": "^3.6.0", "@vueuse/core": "^9.13.0", "highlight.js": "^11.7.0", "katex": "^0.16.4", "markdown-it": "^13.0.1", "markdown-it-highlightjs": "^4.0.1", "naive-ui": "^2.34.3", "pinia": "^2.0.32", "vue": "^3.2.47", 10 chan...
constmd=require('markdown-it')().use(require('markdown-it-highlightjs'),{inline:true}) You can specify the language for inline code usingPandoc syntax: `x=4`{.js} Orkramdown IAL syntax: `x=4`{:.js} If you do not specify a language, then highlight.js will attempt to guess the...
使⽤highlightjs+markdown编辑器⾃定义博客园代码⾼亮 ⼀下载选定highlightjs主题CSS样式 1. 先去选择⼀个主题,然后直接下载主题包,找到对应名字的css,复制所有css样式代码 2. 然后博客园选项修改默认编辑器为markdown,如下:⼆修改CSS代码并设置 1. 在样式的第⼀⾏.hljs前⾯加上这句 .cnblogs-...
使用了流行的markdown-it(MarkDown渲染),highlight.js(语法高亮)和mermaid.js(画流程图、时序图等的js库)组件。 先看一个我的个人博客截图,后续准备开源出来,没使用数据库,只使用md文件和配置文件就完成了所有功能。 所以部署也很简单,不用先建库,建表,直接放到服务器的一个任意目录里运行即可,写博客就是往目...
我将 hexo-renderer-marked 换成 hexo-renderer-markdown-it,然后在 _config.yml 里把 highlight 设为 false,然后使用 hexo-prism-plugin,结果代码块渲染的时候确实读取了 prism,但不识别语言种类,看页面源码,发现 class="language-language-cpp",不知道都是哪些东西在 markdown 到 html 的过程中插手了。 Jam...
接下来写一下markdown语法解析的代码吧(其中步骤1、2、3表示的是markdown-it库的用法) import React, { useState } from 'react' // 1.../theme/github-theme.css' import hljs from 'highlight.js' // 引入highlight.js库import 'highlight.js/styles.../theme/github-theme.css' import hljs from...
最近做了一个markdown的个人博客,基于node+express的,前端模版基于ejs,开始是将原始markdown返到页面的标签里,然后用 [链接] 解析的,高亮用的highlight官网的js,在html中是这么调用的: