$hit Talking
准确来说,应该叫做 Markdown 阅读器(markdown viewer) 用户脚本,这篇文章记录一下过程以及其中的一些解决问题的解决技巧.
首先说明,Chrome已经有了插件了Markdown Viewer,并且,体验也非常好.
由于个人不喜欢开着那么多插件,能够用脚本替代的功能,坚决不用插件.
这不,到GreasyFork搜索了一下,发现竟然没有,于是考虑自己动手弄一个.
当然是参考插件的实现,受限于体积,当然也不可能全部功能照搬啦.
一些考虑
考虑到采用CDN的形式虽然能够减小脚本的体积,但是毕竟每次打开文件都要联网,肯定不方便.于是首先考虑的就是做一个功能单一版的实现.单一功能的版本实现之后,再考虑出多功能版和CDN版.
实现方法
- 在浏览器看 markdown 首先要将 markdown 代码转换为 html 代码, 这个功能交给 marked.js 来实现.marked.js项目
- 代码转换之后,要有样式渲染才好看.一个 Coder 看得最多的就是GitHub 的 md 文件,于是考虑用 GitHub 的 css . github-markdown-css 当然,相应的CSS在稍稍改动一下
.markdown-body的样式就OK了. - 整体样式渲染好后,某些地方还略有不足. GitHub 最重要的功能是代码,如果没有代码高亮,怎么向人民群众交代? 于是代码高亮的功能交给 prism.css 和 prism.js 来实现. prismjs官网
一些技巧
JavaScript 中 大段文本/多行文本,推荐两种方法.
第一种:中小数目多行文本 用反引号 ( ` ),同时可以实现动态字符串例如:
var a=3, b=4, c='ss', s = `
我是多行文本,行1
我是多行文本,行2
我是多行文本,行${a}
我是多行文本,行${b}
我是多行文本,行5
我是多行文本,行6
${c}
`;
使用输出命令 console.log(s) 得到结果
我是多行文本,行1
我是多行文本,行2
我是多行文本,行3
我是多行文本,行4
我是多行文本,行5
我是多行文本,行6
ss
第二种:大型多行复杂文本,用 "函数转字符串" 方法,详情见 脚本之家 文章 javascript的创建多行字符串的7种方法, 例如:
function funString (fun) {
return fun.toString().slice(12, -1);
}
var string1 = funString(function(){/*
!!! 5
html
include header
body
//if IE 6
.alert.alert-error
center 对不起，我们不支持IE6，请升级你的浏览器
a(href="http://windows.microsoft.com/zh-CN/internet-explorer/download-ie") | IE8官方下载
a(href="https://www.google.com/intl/en/chrome/browser/") | Chrome下载
include head
.container
.row-fluid
.span8
block main
include pagerbar
.span4
include sidebar
include footer
include script
strint = `aaaaaaaabbbbbbbbbbccccccccc` + 'document.getElementById("main")';
*/});
console.log(string1);
显然,当多行文本中夹杂着大量的 */ , \ , ' , " 符号时候,其他的方法都比较无奈.如果字符串不需要包含上面的 /* 和*/,可以把 funString 改成:
function funString (fun) {
return fun.toString().slice(14, -3);
}
*.slice(int 1, int 2) 中 int 1 对应函数定义字符串前面不需要的字符个数, int 2 对应字符串后面不需要的字符个数.
构建代码
构建代码过程中,第三方文件经过压缩再整合到脚本文件中.一方面这样可以减小体积,另一方面,第三方文件估计其他开发者也没有那么多时间研究,其实压缩之后,脚本的代码结构会更加清晰.
step① 文件头
// ==UserScript==
// @name Markdown Viewer
// @namespace http://tampermonkey.net/
// @version 0.2
// @description view Markdown in Chrome
// @author ****
// @match file:///*md
// @grant GM_addStyle
// @run-at document-end
// ==/UserScript==
step② 立即执行函数开始,引入压缩的 marked.js 和 github-markdown-css
(function() {
'use strict';
/* marked.min.js */
!function(){function b(b){******************************}());
/* github-markdown-min-css */
var githubMarkdownCss = `@font-face{*********************************}*******}`;
step③ 对 GitHub markdown css 做一些 父容器 修饰
githubMarkdownCss += `
/*Markdown Viewer <body> is elements container*/
.markdown-body summary:hover {
cursor: pointer;
}
body {
min-width: 900px;
max-width: 900px;
background: white;
overflow: auto;
border: 1px solid rgb(211,211,211);
padding: 45px;
margin: 20px auto;
}
`;
step④ 设置 marked 转换选项 → 转码 → 替换文档内容 → css 渲染
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false
});
var htmlTxt = marked(document.body.innerText);
document.body.setAttribute("class", 'markdown-body');
document.body.innerHTML = htmlTxt;
GM_addStyle(githubMarkdownCss);
step⑤ 引入 prism.css 作为<style>节点 插入<head> ; 引入 prism.js 作为 <script>节点 插入文档执行样式渲染
var prismCss = `code[class********************************************`;
GM_addStyle(prismCss);
/* a function to set multi-line text*/
function funString (fun) {
return fun.toString().slice(12, -1);
}
var prismJs = funString(function(){
var _self="undefined"!=typeof window*************
*************************************************
*************************************************
});
/*create a script-node to run prism.js to hightlight keywords*/
var prismjs = document.createElement('script');
prismjs.innerText = prismJs;
document.body.appendChild(prismjs);
})();//function end
脚本完成
欢迎访问和使用脚本 GreasyFork 上的脚本 Markdown Viewer onBrowser.
网友评论