markdown解析与着色

简介

最近在调整博客园博客样式,使用markdown发表的博客。这个不要太好用,有道云+markdown简直绝配,可以发在任何支持markdwon的博客网站,样式基本不会走形,博客园对自定义样式也支持的很好。之前写过一个篇博客园对markdown语法的支持可以看到效果。

代码怎么像这样的效果呢?

其实很简单就是解析+着色

markdown解析

markdown的解析暂时查到就有四种javascript库:

  1. marked
  2. mdjs
  3. HyperDown
  4. strapdown

而这四种插件的使用也很简单,引用好js库后直接解析加载的markdwon文件将其放入document中就ok,javascript代码如下:

$.ajax({
    type: "get",
    //url: "/Content/markdown/demo.md",
    url: "@Url.Action("MarkdonwFile")",
    async: false,
    dataType: "text",
    success: function (response, status, request) {
        $('#mdjsDemo').html(Mdjs.md2html(response));//mdjs
        $('#markedDemo').html(marked(response)); //marked
        var parser = new HyperDown;
        $('#hyperDownDemo').html(parser.makeHtml(response));//HyperDown
    }
});

由于ajax不能直接请求md文件,暂时不知道什么原因先不理会,服务器代码如下:

public ActionResult MarkdonwFile()
{
    //返回markdown文件
    var mk = AppDomain.CurrentDomain.BaseDirectory + "Content/markdown/demo.md";
    return File(mk,"text/plain");
}

效果如下:

highlight 着色

markdown经解析后其中code是html默认的样式黑白两色,看着不舒服,可以试用highlight进行着色。
highlight的使用也非常简单引用库并调用hljs.initHighlightingOnLoad()即可,代码如下:

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad()
</script>

highlight支持着色的语言非常多,样式也很很丰富。

highlight 动态着色

效果如下:

cdnjs上可以获取highlight的js脚本和css样式,可是css样式很多一个个粘贴很麻烦。所以想了个方法自动生成<option></option>项。

cdnjs的highlight库上可以看到js和css是一个列表。

简单分析后,可以用如下代码拼接所有的option

$('.library-url').toArray().filter(item = >{
    return $(item).html().endsWith('.css')
}).reduce((tmp, item) = >{
    return tmp + '<option value="' + $(item).html() + '">' + $(item).html().substr($(item).html().lastIndexOf('/') + 1) + '</option>'
})

效果如下:

参考

原文地址:https://www.cnblogs.com/ricolee/p/markdown-parse.html

时间: 2024-10-02 03:45:12

markdown解析与着色的相关文章

php markdown解析

<?php header("content-type:text/html;charset=utf-8"); require_once('Parsedown.php'); $text = '##Markdown有哪些功能? * 方便的`导入导出`功能     *  直接把一个markdown的文本文件拖放到当前这个页面就可以了     *  导出为一个html格式的文件,样式一点也不会丢失 * 编辑和预览`同步滚动`,所见即所得(右上角设置) * `VIM快捷键`支持,方便vim党

开发一个简单的chrome插件-解析本地markdown文件

准备软件环境 1. 软件环境 首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器 编辑器vscode 2. 使用的js库 代码高亮库:prismjs https://prismjs.com/download.html markdown解析库:marked.min.js https://github.com/markedjs/marked 搭建工程 创建一个md-reader目录,进入md-reader目录 1. 目录结构 然后,创建需要的文件 md-reader |----sr

Python使用Mistune对markdown自定义规则解析

Mistune--更快的markdown解析器 在Python中有很多markdown解析器,以前我一直使用的是Python-markdown,一个纯Python实现的markdown解析器,别的不说,慢的要死倒是真的.每次点击保存后,都要响应很久,我开始一直以为是我的vps在国外导致的,后来还用了Mistune才知道,不是网速的问题,是解析器的速度问题. 没有对比就没有伤害,Mistune是所有纯Python实现中最快的一个.在纯Python环境中,几乎比Python- markdown快4倍

CSDN markdown 编辑器 第一篇

最近CSDN 新出了markdown编辑器.我这也算是尝鲜. 最初接触markdown编辑器是在2011年.那个时候,使用markdown编辑器写blog.然后将blog放到github上托管.markdown还不能像现在这样可以实时编辑显现.那个时候有一个markdown engine专门将markdown语法转换成html. 每次感觉自己写对了.实际上语法各种不对. 究竟什么是markdown? markdown是一种更加贴近自然表达的语法,它可以转换成互联网上通用展示的html格式. -

在Django中使用markdown

markdown比wiki语法要简单,github上的代码几乎都是readme.md,这种易读易写的脚本语言已经变得非常流行. 关于语法,可参考markdown语法 本片博文简单介绍一下如何在Django中集成markdown的功能 下载python下的markdown解析器. $sudo pip install markdown 或者是 $sudo easy install markdown 其他安装方式可参考markdown的python解析器 在app的models.py中创建一个博文的类

CSS 继承深度解析

FROM ME: 之前在研究前端性能优化的时候,就有学习关于CSS中“善用CSS中的继承”. 原文:CSS Inheritance, The Cascade And Global Scope: Your New Old Worst Best Friends 译文:掘金翻译计划 我酷爱模块化设计.长期以来我都热衷于将网站分离成组件,而不是页面,并且动态地将那些组件合并到界面上.这种做法灵活,高效并且易维护. 但是我不想我的设计看上去是由一些不相关的东西组成的.我是在创造一个界面,而不是一张超现实主

Markdown,你只需要掌握这几个

为什么使用Markdown?这是一个问题.答案有很多种.比如,不局限于格式啦,比如 .xls 文档得用excel打开吧, .doc 文档得用word打开吧, .xxx 得用xxx打开吧.如果你机子上没有这个软件,岂不是抓瞎了,还能不能愉快的学习了?!因此你需要一种能使用简单的文本编辑器就可以书写,有浏览器就可正常显示的格式或标记,Markdown很适合哦.什么,这个理由不好?那么就权当是装B吧,你说你用Markdown写文档,是不是逼格一下就上去了.(哎,估计也只有我这种新手才用来炫耀,大牛都是

Laravel项目中使用markdown编辑器及图片粘贴上传七牛云

本文为转载,原文:http://www.chairis.cn/blog/article/15 Markdown Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.本次我们选用的编辑器是: Editor.md,官网中也有很详细的介绍.从官网中下载安装下载的内容中,也有很多demo可以借鉴.在下载的包中,去除一些多余的内容,只保留我们需要的内容,然后加到项目的public目录下,如下图红色框内的内容: 项目中使用 在项目中使用edit

自己动手开发更好用的markdown编辑器-04(预览功能)

这里文章都是从个人的github博客直接复制过来的,排版可能有点乱. 原始地址 http://benq.im/2015/04/25/hexomd-04/ 程序打包 文章目录 1. 打开新窗口 2. 预览功能 3. 优化体验 3.1. 滚动条随动 3.2. 样式美化 3.3. 代码块高亮 3.4. 关闭主程序前先自动关闭预览窗口 4. 总结 5. 附件 上一篇我们实现了系统模块的一些功能,对angular的使用更深入了一点. 今天这篇我们要实现实时预览的功能,将学习到如何使用nw.js打开额外新窗