想要自己实现markdown编辑器,欲使用markdown-it作为编辑器,有着比较多的插件,可以实现代码高亮以及对数学公式转换等功能。

  1. // Activate/deactivate rules, with curring
  2. var md = require('markdown-it')()
  3. .disable([ 'link', 'image' ])
  4. .enable([ 'link' ])
  5. .enable('image');
  6. // Enable everything
  7. md = require('markdown-it')({
  8. html: true,
  9. linkify: true,
  10. typographer: true,
  11. });

插件加载方式

  1. var md = require('markdown-it')()
  2. .use(plugin1)
  3. .use(plugin2, opts, ...)
  4. .use(plugin3);

代码高亮

  1. var hljs = require('highlight.js'); // https://highlightjs.org/
  2. // Actual default values
  3. var md = require('markdown-it')({
  4. highlight: function (str, lang) {
  5. if (lang && hljs.getLanguage(lang)) {
  6. try {
  7. return hljs.highlight(lang, str).value;
  8. } catch (__) {}
  9. }
  10. return ''; // use external default escaping
  11. }
  12. });

Tex数学公式markdown-it-mathjax

  1. var md = require('markdown-it')()
  2. .use(require('markdown-it-mathjax')());
  3. md.render('$1 *2* 3$') // => '<p>\(1 *2* 3\)</p>'

markdown转换为html的更多相关文章

  1. Pandoc将markdown转换为word

    markdown转换为word的指令 直接将markdown转换为word pandoc -f markdown -t docx ./test.md -o test.docx 关于markdown转为 ...

  2. 如何将markdown转换为wxml

    话说我要为技术博客写一个小程序版,我的博客解决方案是 hexo + github-page,格式当然是技术控们喜欢的 markdown 了 .但小程序使用的却是独有的模版语言 WXML.我总不能把之前 ...

  3. windows使用Pandoc将Markdown转换为PDF文件

    pandoc下载:https://github.com/jgm/pandoc/releases/tag/1.19.2.1 //windows下载msi文件 miktex下载:https://mikte ...

  4. sublime text 下的Markdown写作

    sublime text 2(3)下的Markdown写作 什么是 Markdown wiki Markdown 是一种方便记忆.书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富 ...

  5. 【转】sublime text 2 下的Markdown写作

    sublime text 2 下的Markdown写作   作为Windows/Mac/Linux下强大的文本编辑器,st提供了对Markdown语言的支持.通过设置可实现markdown预览和转换功 ...

  6. 将markdown格式转化为bootstrap风格html

    前言:这些年markdown格式的文件很流行,像github里project说明文档都是用markdown格式编写. 一方面,我们能够通过pandoc将markdown文件转换为html,这样将htm ...

  7. Markdown文件导出为HTML的小程序

    Markdown文件导出为HTML的小程序 为什么做 最近把一些学习经验记下来,总结成MarkDown文件,不知不觉已经有12篇了. Sublime Text 的 MarkDown Preview 插 ...

  8. 【转】我们为什么要使用 Markdown

    目录 从前码字时我们面临着什么困境 标记语言显神威 到底什么是 Markdown 所以为什么我们要使用 Markdown Markdown 简明语法 段落和换行 标题 区块引用 列表 强调 代码标识和 ...

  9. Element 文档中的 Markdown 解析

    Element 的文档站是讲Markdown解析成vue组件在页面中渲染出来,转换过程如下图所示: 红框部分势必要对 Markdown 进行特殊的订制,订制过的 Markdown 像下面这样. ::: ...

随机推荐

  1. 利用Confluence搭建企业Wiki

    Confluence安装与部署 下载安装包及破解包 安装包下载地址:https://www.atlassian.com/software/confluence/download-archives 破解 ...

  2. 理解jquery的$.extend()、$.fn和$.fn.extend()的区别及用法

    viajQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototy ...

  3. Logistic Ordinal Regression

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  4. 跟上Java8 - 日期和时间实用技巧

    原文出处:王爵nice 当你开始使用Java操作日期和时间的时候,会有一些棘手.你也许会通过System.currentTimeMillis() 来返回1970年1月1日到今天的毫秒数.或者使用Dat ...

  5. npm 5.4.2 更新后就不能用了

    今天刚,npm run dev 就出现更新提示,没多想就更了, 更新用了49S,下来npm 的所以命令包一个semer的插件 ... 最后下载新node 8.5覆盖安装, 就解决了, node 8.5 ...

  6. AVC的三种规格

    AVC其实就是H.264标准,是由ITU-T和ISO/IEC组成的联合视频组(JVT,Joint Video Team)一起开发的,ITU-T给这个标准命名为H.264(以前叫做H.26L),而ISO ...

  7. vsCode开发java遇到的问题整理、解决方案(持续更新)

    获取控制台输入的信息: 休息launch.json文件中的console属性internalConsole(内部控制台)修改为externalTerminal(外部控制台)即可正常获取输入信息,代码如 ...

  8. Docker查看映射卷报错

    问题描述: 当查看Docker容器的映射卷时出现报错信息,如下: [root@kazihuo ~]# docker inspect -f {{.Volumes}} volume   #volume指容 ...

  9. Java并发编程原理与实战三十二:ForkJoin框架详解

    1.Fork/Join框架有什么用呢? ------->Fork使用来切分任务,Join是用来汇总结果.举个简单的栗子:任务是1+2+3+...+100这个任务(当然这个任务的结果有好的算法去做 ...

  10. input必填

    <li> <span>出生日期</span> <div style="margin-left: 1.5rem;"> <inpu ...