文档 | Rstudio下的轻量级单页面markdown阅读器 markdownReader
需求：在写R数据分析项目的时候，代码及结果的关键变化怎么记录下来？最好git能很容易的跟踪版本变化。
- markdown 是最理想的选择，本文给出一种Rstuidio下的轻量级md阅读器实现：markdownReader。
- 书写md还是在Rstudio。
- 更新内容后保存，回到网页刷新即可看到最新效果，无需编译。
- 优点：
免费，阅读效果好，方便多文档阅读，防止复制误删除。
前置知识：掌握 markdown 的语法格式。常见的有6大类，如 标题#，列表-，代码```，链接[]圆括号，图片，注释>。
1. 目录结构
output/ 输出内容
script/ 代码文件及文档，git记录整个内容
|- a0_xx.R 我的R代码
|- a1_yy.R 我的另一个R代码
|- docs/ 文档文件夹
|- |- index.html 作为markdown阅读器
|- |- help.md 入口文档，打开index.html 默认读取help.md文档
|- |- CD45.md 自定义文档示例
|- |- adv/ 二级目录
|- |- |- xx.md 二级目录下的md文档
2. md阅读器 index.html 的代码实现
-
警告：这是重点和难点。如果看不懂html/css/js，尽量不要做任何修改。
-
注意：需要联网载入js和css文件才能正常预览效果。
$ cat index.html
<meta charset="utf-8"/>
<title>MarkdownReader.js</title>
<!--
<script src="/StackNote/static/js/lib/marked-2.0.3.js"></script>
<link rel="stylesheet" type="text/css" href="/StackNote/static/css/MarkDown.css" media="all">
v0.1 only js markdown reader;
-->
<script src="https://note.biomooc.com/static/js/lib/marked-2.0.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://note.biomooc.com/static/css/MarkDown.css" media="all">
<style>
body{margin:0; padding:0;}
.wrapper{
width:800px;
margin:0 auto;
}
.header{ padding:5px; color: #aaa; font-size:small; border-bottom:1px dashed #aaa; }
.footer{margin-top:80px; border-top:1px solid black; padding:10px; color: #999;}
.markdown a{
color: #0969da;
text-decoration: none;
}
.markdown a:hover{ text-decoration: underline; }
.markdown p{ display: block; }
</style>
<div class="header wrapper">
filename: <span id="filename"></span>
</div>
<div class="markdown">
<div id="content" class="wrapper"></div>
</div>
<div class="footer wrapper">
Powered by <a target="_blank" href="https://github.com/markedjs/marked">markedJS</a> |
Fork me on <a target="_blank" href="https://github.com/DawnEve/bioToolKit/tree/dev/JavaScript/markdownReader">Github</a> |
</div>
<script>
// Tools
//get parameters from URL
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
//ajax get file contents;
function ajax(fileName, obj){
var xmlhttp=new XMLHttpRequest(); //1.获取对象
//2.绑定回调函数
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
//wjl=marked.parse(xmlhttp.responseText);
obj.innerHTML= marked(xmlhttp.responseText);
}
}
//3.设定访问的url
xmlhttp.open("GET", fileName, true);
//4.发送请求
xmlhttp.send();
}
// Action after window OK;
window.onload=function(){
// get parameter from URL;
var filename=getUrlParam("file");
filename = filename || "./help.md";
// update toast
document.getElementById("filename").innerHTML=filename;
//render md to html
ajax(filename, document.getElementById('content'))
}
//document.getElementById('content').innerHTML = marked.parse('# Marked in the browser\n\nRendered by **marked**.');
</script>
3. 自定义文档：md格式
(1) 默认载入的help.md文件
打开index.html 默认载入的help.md文件，该md文件由用户提供。
就是很常规的md格式，比如，随便写3行内容：
$ cat help.md
# Milestone
[CD45](?file=CD45.md)
## cell cluster (117204=117k cells)
-
在Rstudio 的Files 面板单击 script/docs/index.html，选择 View in web browser。
-
自动载入同目录下的 help.md 文件，效果如下图：
其中：- 1 为Rstudio 预览html的地址栏url
- 2 为实际上载入的md文件路径，相对于index.html文件；
- 3 这是一个标准的md a链接，写法是
[CD45](?file=CD45.md)，指向同目录下的 CD45.md文件。
(2) 载入更多其他md文件
注：可通过在help.md中写a链接，通过参数file引入更多其它md文件，比如 ?file=XX.md
$ cat CD45.md
# this is CD45 file
- T
- B
- mono
点击以上index.html页面中的 CD45 链接，可预览CD45.md文件，其内容如上文，页面效果如下：
- 1 是url，可见完整格式就是
index.html?file=CD45.md，可以自己直接组装URL来显示二级目录下的md。 - 2 显示实际上载入的文件路径。
(3) 载入二级目录中的md文件
在文档目录 docs/ 下可新建二级目录 adv/，再在其中新建md文件 xx.md，内容如下图。
可以直接在浏览器的地址栏手工输入url，末尾是 index.html?file=adv/xx.md，渲染效果如下：
类似的，可支持更多层级的文档目录结构。
4. markdown 语法简介(.md结尾)
略，网上很多。
(1) md中的 代码
首尾行写三个反引号，就是键盘顶部一排数字键数字1的左边那个键`。
如输入左侧的2行R代码，渲染出右侧的灰背景红字代码效果。
注:这是md，不是Rmd。本文仅仅是文档显示，不能执行。
End