Markdown文本转html

今日收到一个需求 ：需求方想要一个FAQ页面 由于FAQ内容会不停更新，希望能让市场的人 直接用md转html

1 运用Typora 进行转换

• 下载Typora下载地址
• 打开设置–>打开主题文件夹
• 主题文件夹中有一些ide自带的主题文件的css这些css能兼容pc和移动端（个人认为很棒）
• 自定义特别样式 以github主题为例 新建github.user.css 就可以自定义样式了
• 保存css后生成html文件就可以了 >
• 需要注意的是我要做的折叠内容 虽然可以用html标签 但是html标签内不允许使用markdown语法 最后用js的方式实现了折叠 如下

function sw(obj, tag, show) {
	var nextAll = $(obj).nextAll()
	for(var i = 0; i<nextAll.length;i++) {
		var v = $(nextAll[i])
		var tag0 = v.prop("tagName").toLowerCase()
		if (tag == tag0) break;
		console.log(v)
		if (show) v.show() 
		else v.hide()
	}
	$(obj).data('sw-show', show)
}

$('h2:not(:first)').each(function () {
	sw(this, 'h2', false)
})

$('h2').click(function () {
	var show = $(this).data('sw-show')
	if (typeof show == 'undefined') show = true
	console.log(show)
	sw(this, 'h2', !show)
})

2. 用atom插件

• 安装atom(地址)
• 安装markdown-preview-enhanced插件
  1. File–>Setting->install package搜索并下载插件
  2. 进入用户目录 找到 .atom/package 命令行

  git clone https://github.com/shd101wyy/markdown-preview-enhanced.git
  cd markdown-preview-enhanced
  npm install
  

(此处推荐安装汉化插件 simplified-chinese-menu)

• 配置自定义css
• 快捷键 ctrl+shift+P(mac为command)输入 Markdown PreviewEnhanced： customize css
• 打开style.less修改样式保存
• 打开Md文件（ctrl+shift+M）打开预览页面
• 右键保存

问题也是 html标签不支持md语法

Chorme 插件

• chorme浏览器–>更多工具–>扩展工具
• 打开菜单–>网上商店搜索 Markdown Preview Plus插件并下载
• 允许打开文件网址
  
• options打开
  
• 选择你添加的css 用浏览器打开md 加载html样式le

缺点：应该是不支持md使用html标签

～完