技术标签: vue2.0 前端 markdown vue.js javascript
生成的标题标签自带具有id属性,值为标题内容;
<h2 id="测试">测试</h2>
# 处理md为html字符串,内部依赖了 marked
yarn add markdown-loader
# 处理字符串,用于导出显示
yarn add html-loader
module.exports = defineConfig({
...
chainWebpack: (config) => {
config.module
.rule('md')
.test(/\.md$/)
.use('html-loader')
.loader('html-loader')
.end()
.use('markdown-loader')
.loader('markdown-loader')
.end()
},
})
转换后:生成新的html标签包住,没有id属性,不好进行其他操作;
<h2 >测试</h2>
yarn add vue-markdown-loader
chainWebpack: (config) => {
config.module
.rule('md')
.test(/\.md$/)
.use('vue-loader')
.loader('vue-loader')
.end()
.use('vue-markdown-loader')
.loader('vue-markdown-loader/lib/markdown-compiler')
.options({
raw: true,
})
},
marked
或markdown-it
或markdown-it-vue
等插件解析# 配置导入md文件的loader
yarn add html-loader
chainWebpack: (config) => {
config.module
.rule('md')
.test(/\.md$/)
.use('html-loader')
.loader('html-loader')
.end()
},
介绍:
id
markdown-loader
使用了该插件;yarn add marked
// 使用
<div v-html="mdHtml"></div>
---
import {
marked } from 'marked'
this.mdHtml = marked('## hello')
// <h2 id="hello">hello</h2>
介绍:
id
,需要配置;markdown-it-vue
封装了该插件;marked
;yarn add markdown-it
// 使用
<div v-html="mdHtml"></div>
---
import MarkdownIt from 'markdown-it'
const md = new MarkdownIt()
this.mdHtml = md.render('## hello')
// <h2>hello</h2>
markdown-it、github-markdown-css、highlight.js
等一些插件;<MarkdownItVue :content="mdHtml"></MarkdownItVue>
---
import a from './a.md'
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
created() {
this.mdHtml = a
},
使用不同样式风格,可引入相关插件
# 样式
yarn add github-markdown-css
import 'github-markdown-css'
对于使用vue-markdown-loader
,直接入口文件引入即可
yarn add highlight.js
# 风格按需选择,这里使用github.css
import 'highlight.js/styles/github.css'
对于使用markdown-loader
,代码高亮需要额外配置,以下两种方式都可以
import hljs from 'highlight.js'
// 方式一:指令v-highlight
Vue.directive('highlight', function (el) {
hljs.configure({
useBR: true })
let blocks = el.querySelectorAll('pre code')
blocks.forEach((block) => {
hljs.highlightBlock(block)
})
})
// 使用
// <div class="markdown-body" v-html="mdHtml" v-highlight></div>
// 方式二:全局配置
Vue.prototype.$hljs = hljs
// 使用
<div class="markdown-body" v-html="mdHtml"></div>
---
mounted() {
this.$hljs.highlightAll()
},
<div class="markdown-body line-numbers" v-html="mdHtml"></div>
mounted() {
this.$prism.highlightAll()
},
module.exports = {
presets: ['@vue/cli-plugin-babel/preset'],
// 配置md代码高亮插件
plugins: [
[
'prismjs',
{
languages: [
'html',
'css',
'js',
'php',
'dart',
'bash',
'java',
'nginx',
'python',
],
plugins: ['line-numbers', 'show-language', 'copy-to-clipboard'],
theme: 'tomorrow',
css: true,
},
],
],
}
文章浏览阅读258次。点击上方"IT牧场",选择"设为星标"技术干货每日送达!1.ag:比grep、ack更快的递归搜索文件内容。2.tig:字符模式下交互查看git项目,可以..._命令行神奇
文章浏览阅读3.2k次。由于前段时间一直忙于开发,没有及时记录开发过程中遇到的问题,现在只能靠回忆来写一些印象深刻的坑了,本篇文章先把本系列的最后一篇补上,前面只是做到了把流推上去,现在还需要把流订阅下来。记得当时是遇到几个问题的,其中一个是订阅其他流后,自己发布的视频就没有声音了,其他问题已经记不清楚了,大家如果遇到什么问题说下说不定能帮助想起了。感接时有点疑惑,推流时已经建立了peerconnection,收..._springboot webrtc janus 视频会议
文章浏览阅读666次。前言AngularJs被用来开发单页面应用程序(SPA),利用AJAX调用配合页面的局部刷新,可以减少页面跳转,从而获得更好的用户体验。Angular的ngView及其对应的强大路由机制,是实现SPA应用的核心模块。本文所说的页面切换指的就是这个路由机制,即根据不同的url展示不同的视图。有一种非常常见的场景:在切换至新页面后,需要通过AJAX调用从服务器请求一些数据,然后根据这些_angularjs路由跳转太慢
文章浏览阅读7.1k次,点赞3次,收藏22次。转自:https://www.bilibili.com/video/BV1Mt411J734https://github.com/aespresso/a_journey_into_math_of_ml说到自然语言处理, 语言模型, 命名实体识别, 机器翻译, 可能很多人想到的LSTM等循环神经网络, 但目前其实LSTM起码在自然语言处理领域已经过时了, 在Stanford阅读理解数据集(SQuAD2.0)榜单里, 机器的成绩已经超人类表现, 这很大程度要归功于transformer的BERT预训练模._transformer分类模型
文章浏览阅读108次。1. 下载arm-linux-gcc-3.4.1.tar.bz2到系统的顶层目录下2. 解压 arm-linux-gcc-3.4.1.tar.bz2 #tar -jxvf arm-linux-gcc-3.4.1.tar.bz2 解压过程需要一段时间,解压后的文件形成了 usr/local/ 文件夹,进入该文件夹,将 arm文件夹拷贝到/usr/local/下 # cd usr/loca..._redhat 交叉编译安装
文章浏览阅读2.1w次。准备工具:可正常上网的MacBook Pro(基于intel的CPU)1:如果之前安装了Windows想安装Windows 11,请先备份数据。如果之前没有安装过Windows,请空降第四步2:跳转至Mac系统关机长按“option“,选择磁盘:MacHD3:清除原先安装的Windows到Mac界面后:启动台-工具-启动转换助理,打开-继续-恢复分区(输入本机管理员密码)一定要先备份好数据!!!4:下载映像打开内置浏览器至下载 Windows 10下载官方系统映像(64位ISO文_macbookpro安装win11
文章浏览阅读51次。创建父子窗体时Button1按钮启动了form4 ,form4启动时button1按钮还是在form4窗体的上面。该怎么处理各位老师请指教?_vb.net 父窗口和子窗口
文章浏览阅读3.6k次。2 用工具自动创建 module-info.java,自己建会出错,项目目录上右键 configure -> create module-info.java。出现这个原因一般是module-info.java 的问题。1 删除 module-info.java。找了很多没什么好的解决方案。_java.lang.module.findexception
文章浏览阅读1k次。文章目录前言前面我们已经介绍过了passwd的使用,今天我们再来看一些特殊的用法查看帮助[root@zmedu-17~]#passwd--help用法:passwd[选项...]-k,--keep-tokens保持身份验证令牌不过期-d,--delete删除已命名帐号的密码(只有根用户才能进行此操作)-l,--lock..._linux passwd --lock
文章浏览阅读709次。Abstract Syntax Trees即抽象语法树。Ast是python源码到字节码的一种中间产物,借助ast模块可以从语法树的角度分析源码结构。此外,我们不仅可以修改和执行语法树,还可以将Source生成的语法树unparse成python源码。因此ast给python源码检查、语法分析、修改代码以及代码调试等留下了足够的发挥空间。1. AST简介Python官方提供的CPython解释器对..._compiler.ast
文章浏览阅读474次。不知大家是否已经注意到个人知客首页和列表页的文章已经实现了部分摘要内容的显示呢?这个看似简单的功能其实给我添了不少麻烦的说,前几天终于解决了,现在和大家一起分享一下经验,嘿嘿~~普通的纯文本文字截取,大家想必已经很熟悉了,java.lang.String.String(byte[] arg0, int arg1, int arg2)就可以了,jsp里substring也能解决,但是..._html转摘要java
文章浏览阅读2.5k次,点赞4次,收藏18次。SSD1306命令命令表单(D/C#=0, R/W#(WR#) = 0, E(RD#=1) 特殊状态除外)基本命令 D/C Hex D7 D6 D5 D4 D3 D2 D1 D0 命令 描述 0 81._ssd1306中文手册