菜单 搜索
首页 前端知识 markdown-it基本使用

markdown-it基本使用

2024-04-08 23:04:28 前端知识 前端哥 620 970 我要收藏

markdown-it能够将markdown语法的内容转换为html内容，这样我们使用markdown语法写的笔记，就可以转换作为网页使用了

Markdown语法

Markdown语法图文全面详解(10分钟学会)

基础使用

安装markdown-it

npm install markdown-it --save

使用markdown-it

可以看到，使用markdown-it，我们把markdown语法的内容转为了html内容。我们发现，md内容中标记的java语言代码会包裹再pre code标签中，并且再highlight函数中回调。。
在这里插入图片描述

转化的html文档

在这里插入图片描述

<style lang="scss">
    .container {
        width: 600px;
        margin: 10px auto;

        textarea {
            outline: none;
        }
    }
</style>

<template>
    <div class="container">
        <textarea v-model="mdContent" rows="6" style="width: 100%;"></textarea>
        <div v-html="htmlContent"></div>
    </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
const MarkdownIt2 = require('markdown-it')

let md1 = new MarkdownIt()
let md2 = new MarkdownIt2()
console.log(md1);
console.log(md2);

console.log(md1.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */
console.log(md2.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
    highlight: function(str, lang) {
        console.log('str->',str,'lang->',lang);
    }
})

export default {
    name: 'md2Html',
    data() {
        return {
            mdContent:'',
            htmlContent:'',
        }
    },
    watch: {
        mdContent(newVal,oldVal) {
            this.htmlContent = md.render(newVal)
        }
    }
}
</script>

代码简单高亮1

根据我们前面学到的highlight.js的用法，我们可以这么做，在编辑的时候实时高亮，就是在md转完html，并且渲染完成后，在$nextTick中，高亮对应的html就可以了。
在这里插入图片描述

<style lang="scss">
    .container {
        width: 600px;
        margin: 10px auto;

        textarea {
            outline: none;
        }
    }
</style>

<template>
    <div class="container">
        <textarea v-model="mdContent" rows="6" style="width: 100%;"></textarea>
        <div v-html="htmlContent"></div>
    </div>
</template>

<script>
import MarkdownIt from 'markdown-it'
const MarkdownIt2 = require('markdown-it')

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

let md1 = new MarkdownIt()
let md2 = new MarkdownIt2()
console.log(md1);
console.log(md2);

console.log(md1.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */
console.log(md2.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
    highlight: function(str, lang) {
        console.log('str->',str,'lang->',lang);
    }
})

export default {
    name: 'md2Html',
    data() {
        return {
            mdContent:'',
            htmlContent:'',
        }
    },
    watch: {
        mdContent(newVal,oldVal) {
            this.htmlContent = md.render(newVal)
            this.$nextTick(()=>{
                console.log(333);
                document.querySelectorAll('pre code').forEach((el) => {
                    hljs.highlightElement(el);
                });
            })
        }
    }
}
</script>

代码高亮2（学习风宇blog）

添加功能：

  • 代码高亮
  • 行号
  • 一键复制
    在这里插入图片描述
<style lang="scss">
@import url('https://fonts.font.im/css?family=Roboto');

* {
    font-family: 'Roboto';
}

.container {
    width: 600px;
    margin: 10px auto;

    textarea {
        outline: none;
    }
}

/* 行号样式 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 18px;
    font-size: 100%;
    left: 0.5em;
    width: 2.1em;
    letter-spacing: -1px;
    border-right: 1px solid #0e0f12;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #282c34;
}

pre {
    position: relative;
    padding-left: 2.6em;
    line-height: 1.3em;
}

.line-numbers-rows>span {
    display: block;
    counter-increment: linenumber;
}

pre {
    background-color: #282c34;
    border-radius: 8px;
}

pre code {
    border-radius: 8px;
}

.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

.language-name {
    position: absolute;
    top: 9px;
    color: #999999;
    right: 43px;
    font-size: 0.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.copy-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: #525252;
    border: none;
    padding: 3px 6px;
    border-radius: 3px;
    color: #cccccc;
    cursor: pointer;
    display: none;
}

pre:hover .copy-btn {
    display: block;
}

.copy-textarea {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
</style>

<template>
    <div class="container">
        <textarea v-model="mdContent" rows="6" style="width: 100%;"></textarea>
        <div v-html="htmlContent"></div>
    </div>
</template>

<script>
import { getArticle } from '@/api/articleApi'

import ClipboardJS from 'clipboard'
console.log(ClipboardJS);

import MarkdownIt from 'markdown-it'
const MarkdownIt2 = require('markdown-it')

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

let md1 = new MarkdownIt()
let md2 = new MarkdownIt2()
console.log(md1);
console.log(md2);

console.log(md1.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */
console.log(md2.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */

const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
    highlight: function (str, lang) {
        /* 
            str-> @Configuration
            @EnableWebMvc
            @EnableGlobalMethodSecurity(prePostEnabled = true) // 因为要控制controller中的方法访问，所以此注解要加到子容器中
            @ComponentScan(basePackages = "com.zzhua.controller",
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})
            public class MyWebConfig implements WebMvcConfigurer {

                @Override
                public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
                    // 开启静态资源访问
                    configurer.enable();
                }

            }
            lang-> java {name: 'Java', aliases: Array(1), keywords: {…}, illegal: /<\/|#/, contains: Array(23), …}
    
        */
        console.log('str->', str, 'lang->', lang, hljs.getLanguage('java'));
        /* 
            <span class="hljs-meta">@Configuration</span>
            <span class="hljs-meta">@EnableWebMvc</span>
            <span class="hljs-meta">@EnableGlobalMethodSecurity(prePostEnabled = true)</span> <span class="hljs-comment">// 因为要控制controller中的方法访问，所以此注解要加到子容器中</span>
            <span class="hljs-meta">@ComponentScan(basePackages = &quot;com.zzhua.controller&quot;,
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyWebConfig</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">WebMvcConfigurer</span> {

                <span class="hljs-meta">@Override</span>
                <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">configureDefaultServletHandling</span><span class="hljs-params">(DefaultServletHandlerConfigurer configurer)</span> {
                    <span class="hljs-comment">// 开启静态资源访问</span>
                    configurer.enable();
                }

            }
        */
        console.log(hljs.highlight(str, { language: lang }).value);

        if (lang && hljs.getLanguage(lang)) {
            try {
                let highlightedHtml = hljs.highlight(str, { language: lang }).value

                // 生成行号
                let lineNum = highlightedHtml.split('\n').length - 1
                let lineNumbersRowsStart = `<span aria-hidden="true" class="line-numbers-rows">`
                let lineNumbersRowsEnd = `</span>`
                for (let i = 0; i < lineNum; i++) {
                    lineNumbersRowsStart += `<span></span>`
                }
                const lineNumbersRows = lineNumbersRowsStart + lineNumbersRowsEnd

                let languageName = `<b class="language-name">${lang}</b>`

                // 当前时间加随机数生成唯一的id标识
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now();
                }
                const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                    /[xy]/g,
                    function (c) {
                        var r = (d + Math.random() * 16) % 16 | 0;
                        d = Math.floor(d / 16);
                        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
                    }
                );
                // 复制功能需要一个textarea（这个id需要前面加个字母啥的，不能以数字开头）
                let textAreaHtml = `<textarea class="copy-textarea" id="copy${codeIndex}">${str}</textarea>`

                let copyButton = `<button class="copy-btn iconfont icon-fuzhi"  data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}" type="button"></button>`

                /* 如果返回的不含pre code标签，它会自己加上；如果返回的含有pre code标签，它就不加了 */
                return `<pre><code class="language-${lang} hljs">${highlightedHtml}</code>${lineNumbersRows}${languageName}${copyButton}${textAreaHtml}</pre>`;
            } catch (__) { }
        }
        return ""
    }
})

export default {
    name: 'md2Html',
    data() {
        return {
            mdContent: '',
            htmlContent: '',
        }
    },
    mounted() {
        getArticle(29).then(data => {
            this.mdContent = data.mdContent
        })
    },
    watch: {
        mdContent(newVal, oldVal) {
            let _this = this
            this.htmlContent = md.render(newVal)
            this.$nextTick(() => {
                var clipboard = new ClipboardJS('.copy-btn');


                clipboard.on('success', function (e) {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);
                    
                    _this.$toast('success','复制成功了哦');
                    e.clearSelection();
                });

                clipboard.on('error', function (e) {
                    console.error('Action:', e.action);
                    console.error('Trigger:', e.trigger);
                });
            })
        }
    }
}
</script>

markdown-it 扩展插件

有些markdown语法，在没有装插件之前不能正常显示，需要安装插件后，才能正确显示。

使用示例

需要安装插件，安装命令在后面

import MarkdownIt from 'markdown-it'
let md1 = new MarkdownIt()
console.log('未用markdown-it-sub时: ', md1.render('H~2~0')); /* 未用markdown-it-sub时: <p>H~2~0</p> */

const md3 = new MarkdownIt().use(require('markdown-it-sub'))
console.log('使用markdown-it-sub时: ', md3.render('H~2~0')); /* 使用markdown-it-sub时: <p>H<sub>2</sub>0</p> */


console.log(md3.render('Hello from mars :satellite:'));

md3.use(require('markdown-it-emoji')) /* <p>Hello from mars :satellite:</p> */

console.log(md3.render('Hello from mars :satellite:'));/* <p>Hello from mars 📡</p> */

代码

在这里插入图片描述
安装插件

npm i markdown-it-sub markdown-it-sup markdown-it-mark markdown-it-abbr markdown-it-container markdown-it-deflist markdown-it-emoji markdown-it-footnote markdown-it-ins markdown-it-katex-external markdown-it-task-lists --save

<style lang="scss">
@import url('https://fonts.font.im/css?family=Roboto');

* {
    font-family: 'Roboto';
}

.container {
    width: 600px;
    margin: 10px auto;

    textarea {
        outline: none;
    }
}

/* 行号样式 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 18px;
    font-size: 100%;
    left: 0.5em;
    width: 2.1em;
    letter-spacing: -1px;
    border-right: 1px solid #0e0f12;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-color: #282c34;
}

pre {
    position: relative;
    padding-left: 2.6em;
    line-height: 1.3em;
}

.line-numbers-rows>span {
    display: block;
    counter-increment: linenumber;
}

pre {
    background-color: #282c34;
    border-radius: 8px;
}

pre code {
    border-radius: 8px;
}

.line-numbers-rows>span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

.language-name {
    position: absolute;
    top: 9px;
    color: #999999;
    right: 43px;
    font-size: 0.8em;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.copy-btn {
    position: absolute;
    right: 8px;
    top: 8px;
    background-color: #525252;
    border: none;
    padding: 3px 6px;
    border-radius: 3px;
    color: #cccccc;
    cursor: pointer;
    display: none;
}

pre:hover .copy-btn {
    display: block;
}

.copy-textarea {
    position: absolute;
    left: -9999px;
    top: -9999px;
}
</style>

<template>
    <div class="container">
        <textarea v-model="mdContent" rows="6" style="width: 100%;"></textarea>
        <div v-html="htmlContent"></div>
    </div>
</template>

<script>
import { getArticle } from '@/api/articleApi'

import ClipboardJS from 'clipboard'
console.log(ClipboardJS);

import MarkdownIt from 'markdown-it'
const MarkdownIt2 = require('markdown-it')

import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'

let md1 = new MarkdownIt()
let md2 = new MarkdownIt2()
console.log(md1);
console.log(md2);

console.log(md1.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */
console.log(md2.render('# markdown-it rulezz!'));/* h1>markdown-it rulezz!</h1> */


const md = new MarkdownIt({
    html: true,
    linkify: true,
    typographer: true,
    breaks: true,
    highlight: function (str, lang) {
        /* 
            str-> @Configuration
            @EnableWebMvc
            @EnableGlobalMethodSecurity(prePostEnabled = true) // 因为要控制controller中的方法访问，所以此注解要加到子容器中
            @ComponentScan(basePackages = "com.zzhua.controller",
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})
            public class MyWebConfig implements WebMvcConfigurer {

                @Override
                public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
                    // 开启静态资源访问
                    configurer.enable();
                }

            }
            lang-> java {name: 'Java', aliases: Array(1), keywords: {…}, illegal: /<\/|#/, contains: Array(23), …}
    
        */
        console.log('str->', str, 'lang->', lang, hljs.getLanguage('java'));
        /* 
            <span class="hljs-meta">@Configuration</span>
            <span class="hljs-meta">@EnableWebMvc</span>
            <span class="hljs-meta">@EnableGlobalMethodSecurity(prePostEnabled = true)</span> <span class="hljs-comment">// 因为要控制controller中的方法访问，所以此注解要加到子容器中</span>
            <span class="hljs-meta">@ComponentScan(basePackages = &quot;com.zzhua.controller&quot;,
                            excludeFilters = {@ComponentScan.Filter(type = FilterType.ANNOTATION,
                            classes = Service.class)})</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyWebConfig</span> <span class="hljs-keyword">implements</span> <span class="hljs-title class_">WebMvcConfigurer</span> {

                <span class="hljs-meta">@Override</span>
                <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title function_">configureDefaultServletHandling</span><span class="hljs-params">(DefaultServletHandlerConfigurer configurer)</span> {
                    <span class="hljs-comment">// 开启静态资源访问</span>
                    configurer.enable();
                }

            }
        */
        console.log(hljs.highlight(str, { language: lang }).value);

        if (lang && hljs.getLanguage(lang)) {
            try {
                let highlightedHtml = hljs.highlight(str, { language: lang }).value

                // 生成行号
                let lineNum = highlightedHtml.split('\n').length - 1
                let lineNumbersRowsStart = `<span aria-hidden="true" class="line-numbers-rows">`
                let lineNumbersRowsEnd = `</span>`
                for (let i = 0; i < lineNum; i++) {
                    lineNumbersRowsStart += `<span></span>`
                }
                const lineNumbersRows = lineNumbersRowsStart + lineNumbersRowsEnd

                let languageName = `<b class="language-name">${lang}</b>`

                // 当前时间加随机数生成唯一的id标识
                var d = new Date().getTime();
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now();
                }
                const codeIndex = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
                    /[xy]/g,
                    function (c) {
                        var r = (d + Math.random() * 16) % 16 | 0;
                        d = Math.floor(d / 16);
                        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
                    }
                );
                // 复制功能需要一个textarea（这个id需要前面加个字母啥的，不能以数字开头）
                let textAreaHtml = `<textarea class="copy-textarea" id="copy${codeIndex}">${str}</textarea>`

                let copyButton = `<button class="copy-btn iconfont icon-fuzhi"  data-clipboard-action="copy" data-clipboard-target="#copy${codeIndex}" type="button"></button>`

                /* 如果返回的不含pre code标签，它会自己加上；如果返回的含有pre code标签，它就不加了 */
                return `<pre><code class="language-${lang} hljs">${highlightedHtml}</code>${lineNumbersRows}${languageName}${copyButton}${textAreaHtml}</pre>`;
            } catch (__) { }
        }
        return ""
    }
})  .use(require("markdown-it-sub"))
    .use(require("markdown-it-sup"))
    .use(require("markdown-it-mark"))
    .use(require("markdown-it-abbr"))
    .use(require("markdown-it-container"))
    .use(require("markdown-it-deflist"))
    .use(require("markdown-it-emoji"))
    .use(require("markdown-it-footnote"))
    .use(require("markdown-it-ins"))
    .use(require("markdown-it-katex-external"))
    .use(require("markdown-it-task-lists"));

console.log('未用markdown-it-sub时: ', md1.render('H~2~0')); /* 未用markdown-it-sub时: <p>H~2~0</p> */
const md3 = new MarkdownIt()
                .use(require('markdown-it-sub'))
console.log('使用markdown-it-sub时: ', md3.render('H~2~0')); /* 使用markdown-it-sub时: <p>H<sub>2</sub>0</p> */

console.log(md3.render('Hello from mars :satellite:'));
md3.use(require('markdown-it-emoji')) /* <p>Hello from mars :satellite:</p> */
console.log(md3.render('Hello from mars :satellite:'));/* <p>Hello from mars 📡</p> */

export default {
    name: 'md2Html',
    data() {
        return {
            mdContent: '',
            htmlContent: '',
        }
    },
    mounted() {
        getArticle(29).then(data => {
            this.mdContent = data.mdContent
        })
    },
    watch: {
        mdContent(newVal, oldVal) {
            let _this = this
            this.htmlContent = md.render(newVal)
            this.$nextTick(() => {
                var clipboard = new ClipboardJS('.copy-btn');


                clipboard.on('success', function (e) {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);
                    
                    _this.$toast('success','复制成功了哦');
                    e.clearSelection();
                });

                clipboard.on('error', function (e) {
                    console.error('Action:', e.action);
                    console.error('Trigger:', e.trigger);
                });
            })
        }
    }
}
</script>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/4618.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

@JsonInclude(JsonInclude.Include.NON_EMPTY)注解用法详解，@JsonInclude、@JsonIgnore两者的区别和递归查找数据的详解

2024-04-20 17:04:37

【网络】协议的定制与Json序列化和反序列化

2024-04-20 17:04:16

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

Android上基于JSON的数据交互应用，从入门到精通

2024-04-20 17:04:59

json文件和jsonl文件有什么区别？什么情况下适合使用jsonl文件？

2024-04-20 17:04:58

2、在vscode上创建第一个C 多文件编译工程（即如何添加task.json和launch.json文件到工程里面）

2024-04-20 17:04:23

盘点Python中4种读取JSON文件和提取JSON文件内容的方法

2024-04-20 17:04:22

语义分割mask掩码转化为labelme格式（json文件）

2024-04-20 17:04:16

labelme标注的json文件数据转成coco数据集格式（可处理目标框和实例分割）

2024-04-20 17:04:52

大家推荐的文章
1

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
2

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
3

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
4

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
5

移动端css布局大全

2024-02-06 15:02:421000
6

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
7

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
8

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999
9

echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999
10

jQuery事件处理

2024-03-12 01:03:32999

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！