全部 android asp.net C/C++ cshap IOS Java javascript nodejs perl php python ruby web容器 其他 前端 数据库 第三方平台 混合式APP 网络 系统 默认分类

创建hexo风格的markdown页面

0 162

 

最近在用 nodejs 搭建一个个人博客,博客当然要有编辑文章的功能啦。个人比较偏爱 hexo 风格的 markdown 格式,所以想自己的博客也是这样的风格。尝试了几个库,发现 marked 的转换很好,但是样式需要自己编写,这个库还算满意。

 

marked

正如在 github 上的介绍,它能够识别标题(#等)、段落和换行、区块引用、列表、强调(**)、斜体(*)、链接、图片、代码块等。

 

准备

首先,在项目中安装 marked

通过 require 引用文件

准备工作好了,就可以开始愉快的使用 marked 啦~~~

 

使用方法:

marked(markdownString [,options] [,callback])

markdownString:(string)被编辑的字符串;

options:(object)通过 marked.setOption 方法配置;

callback:(function)需要异步高亮时,在markdownString解析完全后的回调函数;当 options 缺省时,回调函数可以作为第二个参数。

 

最简单的

marked 会将字符串 ‘hello’ 转换为

hello

 

options

默认选项值:

gfm:使用 GFM 风格。

tables:使用 GFM tables。tables 为true时, gfm 选项也为 true 才起效。

breaks:使用 GFM line breaks。gfm 选项也需为 true 才起效。

pedantic:尽可能的符合 markdown.pl。不修复 markdown 的错误或者不良行为。

sanitize:审查输出。忽略输入的 HTML。

smartLists:使用 smarter list 替代原始的 markdow。最终可能会使用默认的 pedantic。

smartypants:使用像引号和破折号这样的“智能”符号。

 

highlight

highlight:是代码块高亮的函数。有两种方法。

(一)

使用 node-pygmentize-bundled 进行异步高亮。

(二)

使用 highlight.js 进行同步高亮。

highlight参数:

code:需要高亮的代码。

lang: 代码块中指定的编程语言。

callback:使用异步高亮时的回调函数。

 

marked 会将高亮的代码块转换成

content

。记住,高亮的样式需要自己设置哦。

可以设置全局的 pre 和 code 样式来调整它的外观。

至于段落、标题这些,样式也可以自行设置成自己喜欢的样子。

 

关于 marked 更多的资料,请参考 github

 

热忱回答0

  • 加入年费大会员(20每年)
  • 热门标签

    猜你喜欢

    1. vue组件(将页面公用的头部组件化)
    2. Juery的点击事件,三句代码完成全选事件
    3. Unity 3D Framework Designing(4)——设计可复用的SubView和SubViewModel(Part 2)
    4. geoR文档翻译
    5. qlikview 扩展插件制作教程-EchartsGeoMap
    6. 为什么编程语言中日期能够实现加减法
    7. 深度学习库比较
    8. 架构师之路--谈架构师的基本素养和[干货]日志处理
    9. 工厂模式[上周发的有哥们说有明显错误,我是没看出来,望各位帮忙看看。问题好多遍就是不说哪错了]
    10. 学习MVC之租房网站(九)-房源显示和搜索

    衣食父母

    最近热帖

    1. 走进JavaScript——重拾对象 6
    2. 最近用django做了个在线数据分析小网站 6
    3. mysql之 mysqldump 备份恢复详解 7
    4. 深入理解Java常用类-----时间日期 7
    5. css重构之旅 8
    6. 分布式队列ZooKeeper的实现 6
    7. Java-面向对象总结 7
    8. 《HelloGitHub》第 14 期 8
    9. 压缩'语料库,即提取特征词或词频,做量化处理之后以“列向量”形式保存到数据库 8
    10. 【charger battery 充電 充電器 電池】過充保護警告訊息 over charging protection,Battery over voltage protection, warning message 7

    随机文章

    1. Google自定义搜索引擎
    2. Python标准模块--built-ins函数
    3. LINQ to SQL Count/Sum/Min/Max/Avg Join
    4. Emmet使用之HTML
    5. ASP.NET Aries 入门开发教程1:框架下载与运行