玩转markdown 分享几个需要用到的工具

作者:ideras.me 时间:2023-01-29 22:53:20 

玩转markdown 分享几个需要用到的工具

【引自ideras.me的博客】前言

随着wordpress和静态网站的流行,markdown被用的越来越多。

markdown是一个面向写作的语法引擎,markdown的最终目的都是解析成html用于网页浏览,所以它兼容html语法,即你可以在 markdown文档中使用原生的html标签。

markdown解析器

开发静态网站生成器的时候都会采用一种叫front matter的格式进行网站内容写在类似下面的格式


---
2.title: 玩转markdown,你需要用到这几个工具
3.date: 2016-08-14 16:44:54
4.image: /img/pencils-762555_640.jpg
5.---
6.
7.## 前言
8.
9.随着wordpress和静态网站的流行,markdown被用的越来越多。...

当进行网站生成的时候需要进行markdown解析,然后渲染成html页面,那用什么工具进行解析呢?

marked

marked是最早用node.js开发的markdown解析器,同时提供CLI命令调用和node.js api调用。

CLI调用代码示例


$ marked -o hello.html
hello world
^D
$ cat hello.html
<p>hello world</p>

API调用示例


var marked = require('marked');
console.log(marked('I am using __markdown__.'));
// Outputs: <p>I am using <strong>markdown</strong>.</p>

这些都是一些通用的功能,但是marked还支持代码高亮,通过使用highlight.js。

使用highlight.js进行代码高亮相信大家都用到过,可能大家不知道是highlight.js还支持api方式调用,下面的代码会配置marked使用highlight.js进行代码高亮相信大家都用到过,可能大家不知道是highlight


marked.setOptions({
highlight: function (code, lang) {
var res;
if (lang) {
 res = hljs.highlight(lang, code, true).value;
} else {
 res = hljs.highlightAuto(code).value;
}
return res;
}
});

生成的代码已经包含代码高亮标签,最后只需要引入highlight.js的主题就能显示了,highlight.js所有的颜色主题都在这里

markdown-js

markdown-js也是一款使用node.js开发的markdown解析器,基本用法和marked差不多,但是文档里面好像没有提到像marked一样进行代码高亮生成的接口,有兴趣的同学自己找找吧。

markdown生成器

to-markdown

什么是markdown生成器,就是根据html标签生成markdown文件。

github上面markdown生成器star数最高的是to-markdown。

简单的代码示例


var toMarkdown = require('to-markdown');
toMarkdown('<h1>Hello world!</h1>');

to-markdown最近进行了更新,增加了对gfm的兼容,gfm就是git flavored markdown的意思, 是github对markdown语法进行了扩展。

使用gfm的示例


toMarkdown('<del>Hello world!</del>', { gfm: true });

那这个to-markdown有什么用呢?

举个简单的例子,假如我想开发一个简单的rss阅读器,但是我又不想跳转到目标网站去阅读,因为不同的网站风格不一,导致不一致的阅读体验。

怎么办呢?那就把网站内容抓取下来,然后用to-markdown生成markdown文件,然后使用自己的模板样式进行统一渲染。

当然去除广告只是一个side effect。

heckyesmarkdown

除了to-markdown之外还有一个比较好用的api,heckyesmarkdown,这个项目使用了php-readability,提高文章的可读性。

可惜heckyesmarkdown没有开源出来,这个项目有点古老,估计那个时候github还没流行起来。

heckyesmarkdow对中文的支持不是非常友好,如果想抓取中文站还是使用to-markdown比较靠谱一点。

front matter

markdown写文章确实很方便,简单容易上手,但是markdown不能保存元数据,例如作者,日期,类型这样的结构化的数据如果都生成html标签的话提取的时候又稍微麻烦了点, 还得借助cheerio才能完成。

所以,为了能方便的保存文章的元数据,几乎所有的静态网站生成器都使用front matter格式来保存文章。

front matter文件通常分为头部和正文部分,头部一般使用yaml、toml和json三种格式,front matter 解析工具需要识别这三种格式的文件头。正文部分就是普通的markdown内容。

front-matter

front-matter也是用node.js开发的,相比markdown解析器来说,fornt-matter解析器要简单很多。

示例文件 example.md


---
title: Just hack'n
description: Nothing to see here
---

This is some text about some stuff that happened sometime ago

解析代码


var fs = require('fs')
, fm = require('front-matter')

fs.readFile('./example.md', 'utf8', function(err, data){
if (err) throw err

var content = fm(data)

console.log(content)
})
{
attributes: {
 title: 'Just hack\'n',
 description: 'Nothing to see here'
},
body: '\nThis is some text about some stuff that happened sometime ago',
frontmatter: 'title: Just hack\'n\ndescription: Nothing to see here'
}

front matter虽然格式看起来不太统一,却是对markdown强有力的补充。

标签:markdown
0
投稿

猜你喜欢

  • ASP实现表单中容量大的数据的提交方法

    2008-10-16 11:07:00
  • python ConfigParser库的使用及遇到的坑

    2021-08-13 05:45:23
  • 基于python实现垂直爬虫系统的方法详解

    2023-11-17 13:33:38
  • 对Python _取log的几种方式小结

    2021-12-19 02:18:48
  • python break和continue用法对比

    2021-11-03 14:36:20
  • JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)

    2024-05-11 10:25:13
  • 能否用显示/隐藏层来控制FLASH播放与停止

    2008-10-27 14:08:00
  • 解决python将xml格式文件转换成txt文件的问题(xml.etree方法)

    2021-10-21 02:51:13
  • Python和C语言利用栈分别实现进制转换

    2022-10-02 15:43:15
  • Javascript: 为<input>设置readOnly属性问题,希望大家以后要小心

    2009-07-23 20:24:00
  • Python基于opencv实现的简单画板功能示例

    2021-05-06 20:04:37
  • 使用python BeautifulSoup库抓取58手机维修信息

    2022-08-10 01:55:20
  • 利用python求积分的实例

    2023-07-08 15:44:23
  • python修改txt文件中的某一项方法

    2021-02-08 14:26:40
  • JS求解三元一次方程组值的方法

    2024-05-02 17:39:00
  • 深入MYSQL字符数字转换的详解

    2024-01-18 04:20:11
  • python pyheatmap包绘制热力图

    2021-02-18 21:35:46
  • Python3标准库总结

    2022-10-22 13:36:47
  • 关于numpy中np.nonzero()函数用法的详解

    2023-01-06 12:29:34
  • JS中FormData类实现文件上传

    2024-04-10 10:50:10
  • asp之家 网络编程 m.aspxhome.com