Browse Source

add support ToC

mathjax-version
Pandao 10 years ago
parent
commit
0482f10b6f
  1. 26
      README.md
  2. 2
      dist/css/editormd.css
  3. 4
      dist/css/editormd.css.map
  4. 4
      dist/css/editormd.css.min.map
  5. 2
      dist/css/editormd.min.css
  6. 2
      dist/css/editormd.preview.css
  7. 4
      dist/css/editormd.preview.css.map
  8. 4
      dist/css/editormd.preview.css.min.map
  9. 2
      dist/css/editormd.preview.min.css
  10. 150
      dist/js/editormd.js
  11. 4
      dist/js/editormd.min.js
  12. 6
      examples/html-preview-markdown-to-html.html
  13. 3
      examples/index.html
  14. 25
      examples/test.md
  15. 115
      examples/toc.html
  16. 148
      src/js/editormd.js
  17. 6
      src/scss/editormd.preview.scss
  18. 90
      tests/toc-research-and-demo.html

26
README.md

@ -1,18 +1,20 @@
# Editor.md
A simple online markdown editor.
**Editor.md** 是一个基于jQuery和CodeMirror构建的在线Markdown文档编辑器。
![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
####主要特性
- 支持Markdown标准和Github风格;
# Editor.md
A simple online markdown editor.
**Editor.md** 是一个基于jQuery和CodeMirror构建的在线Markdown文档编辑器。
![editormd-screenshot](https://pandao.github.io/editor.md/examples/images/editormd-screenshot.png "editormd-screenshot")
####主要特性
- 支持Markdown标准和Github风格;
- 支持实时预览和多语言语法高亮;
- 支持AMD/CMD模块化加载(支持 [Require.js](https://pandao.github.io/editor.md/examples/use-requirejs.html) & [Sea.js](https://pandao.github.io/editor.md/examples/use-seajs.html));
- 支持ToC(Table of Contents);
- 兼容主流的浏览器(IE8+),且支持iPad等平板设备;
- 技术Latex科学公式(MathJax);
- 支持流程图 `flowchart` 和时序图 `sequenceDiagram`;
- 支持AMD/CMD模块化加载(支持 [Require.js](https://pandao.github.io/editor.md/examples/use-requirejs.html) & [Sea.js](https://pandao.github.io/editor.md/examples/use-seajs.html));
####在线演示

2
dist/css/editormd.css

@ -6,7 +6,7 @@
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-02-06
* @updateTime 2015-02-07
*/
/*!

4
dist/css/editormd.css.map

File diff suppressed because one or more lines are too long

4
dist/css/editormd.css.min.map

File diff suppressed because one or more lines are too long

2
dist/css/editormd.min.css

@ -1,4 +1,4 @@
/*! Editor.md v1.0.0 | editormd.min.css | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-02-06 */
/*! Editor.md v1.0.0 | editormd.min.css | A simple online markdown editor. | MIT License | By: Pandao | https://github.com/pandao/editor.md | 2015-02-07 */
/*!
* Font Awesome 4.3.0 by @davegandy - http://fontawesome.io - @fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)

2
dist/css/editormd.preview.css

@ -6,7 +6,7 @@
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-02-05
* @updateTime 2015-02-07
*/
/*! github-markdown-css | The MIT License (MIT) | Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com) | https://github.com/sindresorhus/github-markdown-css */

4
dist/css/editormd.preview.css.map

File diff suppressed because one or more lines are too long

4
dist/css/editormd.preview.css.min.map

File diff suppressed because one or more lines are too long

2
dist/css/editormd.preview.min.css

File diff suppressed because one or more lines are too long

150
dist/js/editormd.js

@ -6,7 +6,7 @@
* @license MIT License
* @author Pandao
* {@link https://github.com/pandao/editor.md}
* @updateTime 2015-02-06
* @updateTime 2015-02-07
*/
;(function(factory) {
@ -58,6 +58,8 @@
path : "./lib/",
watch : true,
onload : function() {},
toc : true,
tocStartLevel : 2,
fontSize : "13px",
flowChart : false, // flowChart.js only support IE9+
mathjax : false,
@ -251,10 +253,10 @@
editor.append(infoDialogHTML).append(appendElements);
this.preview = editor.find("." + classPrefix + "preview");
this.toolbar = editor.find("." + classPrefix + "toolbar");
this.previewContainer = this.preview.children("." + classPrefix + "preview-container");
this.infoDialog = editor.find("." + classPrefix + "dialog-info");
this.preview = editor.find("." + classPrefix + "preview");
this.toolbar = editor.find("." + classPrefix + "toolbar");
this.previewContainer = this.preview.children("." + classPrefix + "preview-container");
this.infoDialog = editor.find("." + classPrefix + "dialog-info");
this.toolbarIconHandlers = {};
editor.addClass(classPrefix + "vertical");
@ -754,18 +756,18 @@
*/
setMarked : function() {
var marked = editormd.$marked;
var markedRenderer = this.markedRenderer = editormd.markedRenderer();
var marked = editormd.$marked;
var markdownToC = this.markdownToC = [];
marked.setOptions({
renderer: markedRenderer,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: true
renderer : editormd.markedRenderer(markdownToC),
gfm : true,
tables : true,
breaks : false,
pedantic : false,
sanitize : true,
smartLists : true,
smartypants : true
});
return this;
@ -1030,16 +1032,23 @@
*/
saveToTextareas : function() {
var codeEditor = this.codeEditor;
var settings = this.settings;
var codeEditor = this.codeEditor;
var previewContainer = this.previewContainer;
codeEditor.save();
var newMarkdownDoc = editormd.$marked(codeEditor.getValue(), {renderer : this.markedRenderer});
var markdownToC = this.markdownToC = [];
var newMarkdownDoc = editormd.$marked(codeEditor.getValue(), {renderer : editormd.markedRenderer(markdownToC)});
this.markdownTextarea.html(codeEditor.getValue());
this.htmlTextarea.html(newMarkdownDoc);
this.previewContainer.html(newMarkdownDoc);
this.htmlTextarea.html(newMarkdownDoc);
previewContainer.html(newMarkdownDoc);
if (settings.toc) {
editormd.markdownToCRenderer(markdownToC, previewContainer, settings.tocStartLevel);
}
return this;
},
@ -1321,36 +1330,38 @@
*/
editormd.markedRenderer = function(markdownToC) {
var marked = editormd.$marked;
var markedRenderer = new marked.Renderer();
markdownToC = markdownToC || [];
markedRenderer.heading = function(text, level) {
var marked = editormd.$marked;
var markedRenderer = new marked.Renderer();
markdownToC = markdownToC || [];
markedRenderer.heading = function(text, level, raw) {
var escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");
//console.log("escapedText", text, escapedText);
markdownToC.push({
//console.log("escapedText", text, escapedText, level, raw);
var toc = {
text : text,
level : level,
slug : escapedText,
title : text
});
slug : escapedText
};
markdownToC.push(toc);
return "<h" + level + " id=\"" + escape(text) + "\"><a href=\"#" + text + "\" name=\"" + text + "\" class=\"anchor\"></a><span class=\"header-link\"></span>" + text + "</h" + level + ">";
return "<h" + level + " id=\""+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+"\"><a href=\"#" + text + "\" name=\"" + text + "\" class=\"anchor\"></a><span class=\"header-link\"></span>" + text + "</h" + level + ">";
};
var mathJaxList = [];
var mathJaxList = [];
markedRenderer.paragraph = function(text) {
var isMathJax = /\$\$(.*)\$\$/.test(text);
var isMathJax = /\$\$(.*)\$\$/.test(text);
var mathjaxClassName = (isMathJax) ? " class=\"mathjax-code\"" : "";
var isToC = /^\[TOC\]$/.test(text);
if (isMathJax) {
mathJaxList.push(text);
}
return "<p" + mathjaxClassName + ">" + text + "</p>\n";
return (isToC) ? "<div class=\"markdown-toc\"><ul class=\"markdown-toc-list\">" + text + "</ul></div>" : "<p" + mathjaxClassName + ">" + text + "</p>\n";
};
markedRenderer.code = function (code, lang, escaped) {
@ -1373,6 +1384,41 @@
return markedRenderer;
};
/**
* 生成TOC(Table of Contents)
* @param {Array} toc 从marked获取的TOC数组列表
* @param {Element} container 插入TOC的容器元素
* @param {Integer} startLevel Hx 起始层级
*/
editormd.markdownToCRenderer = function(toc, container, startLevel) {
var html = "";
var lastLevel = 0;
startLevel = startLevel || 2;
for (var i = 0, len = toc.length; i < len; i++)
{
var text = toc[i].text;
var level = toc[i].level;
if (level < startLevel) { continue; }
if (level > lastLevel) {
html += "";
} else if (level < lastLevel) {
html += (new Array(lastLevel - level + 2)).join("</ul></li>");
} else {
html += "</ul></li>";
}
html += "<li><a class=\"toc-level-"+level+"\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
lastLevel = level;
}
container.find('.markdown-toc-list').html("").html(html);
};
/**
* 将Markdown文档解析为HTML用于前台显示
* @param {String} id 用于显示HTML的对象ID
@ -1383,11 +1429,13 @@
options = options || {};
var defaults = {
markdown : "",
mathjax : false,
toc : true,
tocStartLevel : 2,
markdown : "",
mathjax : false,
previewCodeHighlight : true,
flowChart : false,
sequenceDiagram : false
flowChart : false,
sequenceDiagram : false
};
editormd.$marked = marked;
@ -1396,21 +1444,27 @@
var div = $("#" + id);
var saveTo = div.find("[type=\"text/markdown\"]");
var markdownDoc = (settings.markdown === "") ? saveTo.html() : settings.markdown;
var markdownToC = [];
var markedOptions = {
renderer: editormd.markedRenderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: true
renderer : editormd.markedRenderer(markdownToC),
gfm : true,
tables : true,
breaks : false,
pedantic : false,
sanitize : true,
smartLists : true,
smartypants : true
};
var markdownParsed = marked(markdownDoc, markedOptions);
saveTo.html(markdownDoc);
div.addClass("markdown-body").append(markdownParsed);
if (settings.toc) {
editormd.markdownToCRenderer(markdownToC, div, settings.tocStartLevel);
}
if (settings.previewCodeHighlight)
{
div.find("pre").addClass("prettyprint linenums");

4
dist/js/editormd.min.js

File diff suppressed because one or more lines are too long

6
examples/html-preview-markdown-to-html.html

@ -4,6 +4,12 @@
<meta charset="utf-8" />
<title>HTML Preview(markdown to html) - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<style>
.editormd-html-preview {
width: 90%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="layout">

3
examples/index.html

@ -28,6 +28,9 @@
<li>
<a href="./use-seajs.html">use-seajs.html</a>
</li>
<li>
<a href="./toc.html">toc.html</a>
</li>
<li>
<a href="./mathjax.html">mathjax.html</a>
</li>

25
examples/test.md

@ -1,10 +1,15 @@
**目录**
[TOC]
#Hello world!
##Hello world!
###Hello world!
####Hello world!
#####Hello world!
######Hello world!
###横线等基本语法
----
@ -14,6 +19,10 @@
> 引用文本 [示例链接](http://localhost/)
###多语言代码高亮
####JS代码 
```javascript
function test(){
console.log("Hello world!");
@ -53,6 +62,8 @@ var testBox = box();
testBox.add("jQuery").remove("jQuery");
```
####HTML代码
```html
<!DOCTYPE html>
<html>
@ -66,7 +77,7 @@ testBox.add("jQuery").remove("jQuery");
</html>
```
####图片
###图片
![ddd](./images/X7t2gyC.png)
@ -74,6 +85,8 @@ testBox.add("jQuery").remove("jQuery");
----
###列表
####无序列表(横线)
- 列表一
@ -116,7 +129,7 @@ Content Cell | Content Cell
----
####科学公式
###科学公式
$$E=mc^2$$
@ -124,7 +137,7 @@ $$\(\sqrt{3x-1}+(1+x)^2\)$$
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
####绘制流程图
###绘制流程图
```flow
st=>start: 用户登陆
@ -137,11 +150,13 @@ cond(yes)->e
cond(no)->op
```
####绘制序列图
###绘制序列图
```seq
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```
```
###结束

115
examples/toc.html

@ -0,0 +1,115 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>TOC - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="layout">
<header>
<h1>TOC(Table of Contents)示例</h1>
</header>
<div class="editormd" id="test-editormd">
<script type="text/markdown"># 7
**目录:**
[TOC]
开源软件现在成为整个互联网时代的支撑技术,你可能已经无法离开由开源软件构建起来的网络世界了。下面我们就来看看一些最重要的开源技术。
###为互联网而生的操作系统linux
Linux是一款免费的操作系统,诞生于1991年,用户可以通过网络或其他途径免费获得,并可以任意修改其源代码。
####linux A
它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳 定的多用户网络操作系统。这个系统是由全世界各地的成千上万的程序员设计和实现的。其目的是建立不受任何商品化软件的版权制约的、全世界都能自由使用的 Unix兼容产品。
####linux B
#####linux B-1
######linux B-1-1
######linux B-1-2
#####linux B-2
######linux B-2-1
######linux B-2-2
#支撑起整个互联网时代的 7 款开源软件-2
Linux可以说是已经无处不在,像Android手机就是以Linux为基础开发的,世界上大多的超级计算机也都采用的Linux系统,大多数的 数据中心使用Linux作为其支撑操作系统。谷歌、百度、淘宝等都通过Linuxt提供了我们每天用的互联网服务。Linux在航空控制系统中也扮演着重 要角色。
###加密互联网的安全协议OpenSSL
OpenSSL是套开放源代码的软件库包,实现了SSL与TLS协议。OpenSSL可以说是一个基于密码学的安全开发包,囊括了主要的密码算法、常用的密钥和证书封装管理功能以及SSL协议,并提供了丰富的应用程序供测试或其它目的使用。
也可以说OpenSSL是网络通信提供安全及数据完整性的一种安全协议,SSL可以在Internet上提供秘密性传输,能使用户/服务器应用之间的通信不被攻击者窃听。OpenSSL被网银、在线支付、电商网站、门户网站、电子邮件等重要网站广泛使用。
去年OpenSSL爆出安全漏洞,因为其应用如此之广,该漏洞爆出让整个互联网都为之震颤。
###互联网的记忆——MySQL
MySQL是一个开源的小型的数据库管理系统,原开发者为瑞典的MySQL AB公司,该公司于2008年被Sun公司收购。2009年,甲骨文公司(Oracle)收购Sun公司,MySQL成为Oracle旗下产品。
很多信息都是存在数据库里面的,很多工程师在开发一些的小型项目时都会采用这个MySQL数据库。MySQL为C、C++、JAVA、PHP等多重 编程语言提供了API接口。而且支持windows、Mac、Linux等多种系统。这种广泛的支持使其得到更多开发者的青睐,MySQL是开发者需要掌 握的数据库之一。
Mysql最初为小型应用而开发,但现在的Mysql已经不是一个小型数据库了。基本上所有的互联网公司都会使用这个数据库系统,一些金融交易也会 采用Mysql作为数据库引擎。Mysql通过相应的调优既可以支撑大规模的访问,又可以保证数据安全性,已经成为威胁传统商业数据库系统的重要力量。
###万能开发工具Eclipse
Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。Eclipse最初由OTI和IBM两家公司的IDE产品开发组创建,起始于1999年4月。目前由 IBM牵头,围绕着Eclipse项目已经发展成为了一个庞大的Eclipse联盟,有150多家软件公司参与到Eclipse项目中,其中包括 Borland、Rational Software、Red Hat及Sybase等。
就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。很多Java编程软件都是在Eclipse平台开发的,还有包括 Oracle在内的许多大公司也纷纷加入了该项目,并宣称Eclipse将来能成为可进行任何语言开发的IDE集大成者,使用者只需下载各种语言的插件即 可。
Eclipse并不是一个直接服务于消费者的产品,它更像一个工匠手中万用工具,用Eclipse开发者可以打造出各种充满创造性的服务来满足最终用户的需求。
###互联网的门卫Apache
Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛 使用,也是最流行的Web服务器端软件之一,市场占有率达60%左右。它快速、可靠并且可通过简单的API扩展,它可以和各种解释器配合使用,包括 PHP/Perl/Python等。
Apache就像一个负责的门卫,管理着服务器数据的进出。每当你在你的地址栏里输入 http://XXX.com 的时候,在遥远的远端,很有可能正是一台跑着Apache的服务器,将你需要的信息传输给浏览器。
###大数据的心脏Hadoop
Hadoop 是一个能够对大量数据进行分布式处理的软件框架,由Apache基金会开发。用户可以在不了解分布式底层细节的情况下,开发分布式程序。Hadoop 一 直帮助解决各种问题,包括超大型数据集的排序和大文件的搜索。它还是各种搜索引擎的核心,比如 Amazon 的 A9 和用于查找酒信息 的 Able Grape 垂直搜索引擎。阿里巴巴集团在商品推荐、用户行为分析、信用计算领域也都有hadoop的应用。
在“大数据”已经成为潮流的当下,Hadoop已经成为最主要的一项技术。可以毫不夸张的说,没有Hadoop,就没有大多数的大数据应用。可以说对一个不知道Hadoop的程序员而言,你已经out了。
###互联网的“排版引擎”WebKit
说是浏览器内核,其实“排版引擎”更容易理解一些。通过服务器传输给浏览器的信息只是一串乱糟糟的文本。要看到我们平时看到精美的网友,需要浏览器内核对这些文本进行解析,将枯燥的描述“画”成美丽的浏览界面。
WebKit 是一个开源的浏览器引擎,与之相应的引擎有Gecko(Mozilla Firefox 等使用的排版引擎)和Trident(也称为MSHTML,IE 使用的排版引擎)。根据StatCounter的浏览器市场份额调查,于2012年11月,Webkit市占超过了40%,它已经成为拥有最大市场份额的 排版引擎,超越了Internet Explorer所使用的Trident及Firefox所使用的Gecko引擎,并且WebKit份额正在逐年增加。
目前几乎所有网站和网银已经逐渐支持WebKit。WebKit 内核在手机上的应用也十分广泛,例如苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。
###小结
很多人可能尚未意识到,我们使用的电脑中运行有开源软件,手机中运行有开源软件,家里的电视也运行有开源软件,甚至小小的数码产品中也运行有开源软件,尤其是互联网服务器端软件,几乎全部是开源软件。毫不夸张地说,开源软件已经渗透到了我们日常生活的方方面面。
稿源:[钛媒体](http://www.tmtpost.com/194306.html)
</script>
</div>
</div>
<script src="../lib/jquery.min.js"></script>
<link rel="stylesheet" href="../dist/css/editormd.css" />
<script src="../src/js/editormd.js"></script>
<script type="text/javascript">
$(function() {
var testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
//toc : false, // diable ToC
path : '../lib/'
});
});
</script>
</body>
</html>

148
src/js/editormd.js

@ -47,6 +47,8 @@
path : "./lib/",
watch : true,
onload : function() {},
toc : true,
tocStartLevel : 2,
fontSize : "13px",
flowChart : false, // flowChart.js only support IE9+
mathjax : false,
@ -240,10 +242,10 @@
editor.append(infoDialogHTML).append(appendElements);
this.preview = editor.find("." + classPrefix + "preview");
this.toolbar = editor.find("." + classPrefix + "toolbar");
this.previewContainer = this.preview.children("." + classPrefix + "preview-container");
this.infoDialog = editor.find("." + classPrefix + "dialog-info");
this.preview = editor.find("." + classPrefix + "preview");
this.toolbar = editor.find("." + classPrefix + "toolbar");
this.previewContainer = this.preview.children("." + classPrefix + "preview-container");
this.infoDialog = editor.find("." + classPrefix + "dialog-info");
this.toolbarIconHandlers = {};
editor.addClass(classPrefix + "vertical");
@ -743,18 +745,18 @@
*/
setMarked : function() {
var marked = editormd.$marked;
var markedRenderer = this.markedRenderer = editormd.markedRenderer();
var marked = editormd.$marked;
var markdownToC = this.markdownToC = [];
marked.setOptions({
renderer: markedRenderer,
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: true
renderer : editormd.markedRenderer(markdownToC),
gfm : true,
tables : true,
breaks : false,
pedantic : false,
sanitize : true,
smartLists : true,
smartypants : true
});
return this;
@ -1019,16 +1021,23 @@
*/
saveToTextareas : function() {
var codeEditor = this.codeEditor;
var settings = this.settings;
var codeEditor = this.codeEditor;
var previewContainer = this.previewContainer;
codeEditor.save();
var newMarkdownDoc = editormd.$marked(codeEditor.getValue(), {renderer : this.markedRenderer});
var markdownToC = this.markdownToC = [];
var newMarkdownDoc = editormd.$marked(codeEditor.getValue(), {renderer : editormd.markedRenderer(markdownToC)});
this.markdownTextarea.html(codeEditor.getValue());
this.htmlTextarea.html(newMarkdownDoc);
this.previewContainer.html(newMarkdownDoc);
this.htmlTextarea.html(newMarkdownDoc);
previewContainer.html(newMarkdownDoc);
if (settings.toc) {
editormd.markdownToCRenderer(markdownToC, previewContainer, settings.tocStartLevel);
}
return this;
},
@ -1310,36 +1319,38 @@
*/
editormd.markedRenderer = function(markdownToC) {
var marked = editormd.$marked;
var markedRenderer = new marked.Renderer();
markdownToC = markdownToC || [];
markedRenderer.heading = function(text, level) {
var marked = editormd.$marked;
var markedRenderer = new marked.Renderer();
markdownToC = markdownToC || [];
markedRenderer.heading = function(text, level, raw) {
var escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");
//console.log("escapedText", text, escapedText);
markdownToC.push({
//console.log("escapedText", text, escapedText, level, raw);
var toc = {
text : text,
level : level,
slug : escapedText,
title : text
});
slug : escapedText
};
markdownToC.push(toc);
return "<h" + level + " id=\"" + escape(text) + "\"><a href=\"#" + text + "\" name=\"" + text + "\" class=\"anchor\"></a><span class=\"header-link\"></span>" + text + "</h" + level + ">";
return "<h" + level + " id=\""+this.options.headerPrefix+raw.toLowerCase().replace(/[^\w]+/g,"-")+"\"><a href=\"#" + text + "\" name=\"" + text + "\" class=\"anchor\"></a><span class=\"header-link\"></span>" + text + "</h" + level + ">";
};
var mathJaxList = [];
var mathJaxList = [];
markedRenderer.paragraph = function(text) {
var isMathJax = /\$\$(.*)\$\$/.test(text);
var isMathJax = /\$\$(.*)\$\$/.test(text);
var mathjaxClassName = (isMathJax) ? " class=\"mathjax-code\"" : "";
var isToC = /^\[TOC\]$/.test(text);
if (isMathJax) {
mathJaxList.push(text);
}
return "<p" + mathjaxClassName + ">" + text + "</p>\n";
return (isToC) ? "<div class=\"markdown-toc\"><ul class=\"markdown-toc-list\">" + text + "</ul></div>" : "<p" + mathjaxClassName + ">" + text + "</p>\n";
};
markedRenderer.code = function (code, lang, escaped) {
@ -1362,6 +1373,41 @@
return markedRenderer;
};
/**
* 生成TOC(Table of Contents)
* @param {Array} toc 从marked获取的TOC数组列表
* @param {Element} container 插入TOC的容器元素
* @param {Integer} startLevel Hx 起始层级
*/
editormd.markdownToCRenderer = function(toc, container, startLevel) {
var html = "";
var lastLevel = 0;
startLevel = startLevel || 2;
for (var i = 0, len = toc.length; i < len; i++)
{
var text = toc[i].text;
var level = toc[i].level;
if (level < startLevel) { continue; }
if (level > lastLevel) {
html += "";
} else if (level < lastLevel) {
html += (new Array(lastLevel - level + 2)).join("</ul></li>");
} else {
html += "</ul></li>";
}
html += "<li><a class=\"toc-level-"+level+"\" href=\"#" + text + "\" level=\"" + level + "\">" + text + "</a><ul>";
lastLevel = level;
}
container.find('.markdown-toc-list').html("").html(html);
};
/**
* 将Markdown文档解析为HTML用于前台显示
* @param {String} id 用于显示HTML的对象ID
@ -1372,11 +1418,13 @@
options = options || {};
var defaults = {
markdown : "",
mathjax : false,
toc : true,
tocStartLevel : 2,
markdown : "",
mathjax : false,
previewCodeHighlight : true,
flowChart : false,
sequenceDiagram : false
flowChart : false,
sequenceDiagram : false
};
editormd.$marked = marked;
@ -1385,21 +1433,27 @@
var div = $("#" + id);
var saveTo = div.find("[type=\"text/markdown\"]");
var markdownDoc = (settings.markdown === "") ? saveTo.html() : settings.markdown;
var markdownToC = [];
var markedOptions = {
renderer: editormd.markedRenderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: true,
smartLists: true,
smartypants: true
renderer : editormd.markedRenderer(markdownToC),
gfm : true,
tables : true,
breaks : false,
pedantic : false,
sanitize : true,
smartLists : true,
smartypants : true
};
var markdownParsed = marked(markdownDoc, markedOptions);
saveTo.html(markdownDoc);
div.addClass("markdown-body").append(markdownParsed);
if (settings.toc) {
editormd.markdownToCRenderer(markdownToC, div, settings.tocStartLevel);
}
if (settings.previewCodeHighlight)
{
div.find("pre").addClass("prettyprint linenums");

6
src/scss/editormd.preview.scss

@ -51,6 +51,12 @@
padding: 0;
}
}
.markdown-toc {
}
.markdown-toc-list {
}
}
.sequence-diagram, .flowchart {

90
tests/toc-research-and-demo.html

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>TOC research</title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
audio, canvas, video {display: inline-block;}
body,html{width:100%;}
body, button, input, select, textarea {font:12px/1.5 Tahoma, "Hiragino Sans GB", "Microsoft Yahei", Arial;}
body{font-size:12px;color:#666;background:#fff url(../images/) no-repeat left top;}
body{font-size:14px;color:#444;font-family:"微软雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{zoom:1;}
.clear:after{content:"";height:0;visibility:hidden;clear:both;display:block;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
<link rel="stylesheet" type="text/css" href="../lib/github-markdown.css" />
</head>
<body>
<div class="markdown-body editormd-preview-container">
<h1>H1</h1>
<h2>H2</h2>
<h3>H3-1</h3>
<h3>H3-2</h3>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3-1</h3>
<h3>H3-2</h3>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3-1</h3>
<h3>H3-2</h3>
<h1 id="-7-"><a href="#支撑起整个互联网时代的 7 款开源软件" name="支撑起整个互联网时代的 7 款开源软件" class="anchor"></a><span class="header-link"></span>支撑起整个互联网时代的 7 款开源软件</h1><p><strong>目录:</strong></p>
<ul class="markdown-toc">[TOC]</ul><p>开源软件现在成为整个互联网时代的支撑技术,你可能已经无法离开由开源软件构建起来的网络世界了。下面我们就来看看一些最重要的开源技术。</p>
<h3 id="-linux"><a href="#为互联网而生的操作系统linux" name="为互联网而生的操作系统linux" class="anchor"></a><span class="header-link"></span>为互联网而生的操作系统linux</h3><p>Linux是一款免费的操作系统,诞生于1991年,用户可以通过网络或其他途径免费获得,并可以任意修改其源代码。</p>
<h4 id="linux-a"><a href="#linux A" name="linux A" class="anchor"></a><span class="header-link"></span>linux A</h4><p>它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想,是一个性能稳 定的多用户网络操作系统。这个系统是由全世界各地的成千上万的程序员设计和实现的。其目的是建立不受任何商品化软件的版权制约的、全世界都能自由使用的 Unix兼容产品。</p>
<h4 id="linux-b"><a href="#linux B" name="linux B" class="anchor"></a><span class="header-link"></span>linux B</h4><h5 id="linux-b-1"><a href="#linux B-1" name="linux B-1" class="anchor"></a><span class="header-link"></span>linux B-1</h5><h6 id="linux-b-1-1"><a href="#linux B-1-1" name="linux B-1-1" class="anchor"></a><span class="header-link"></span>linux B-1-1</h6><h6 id="linux-b-1-2"><a href="#linux B-1-2" name="linux B-1-2" class="anchor"></a><span class="header-link"></span>linux B-1-2</h6><h5 id="linux-b-2"><a href="#linux B-2" name="linux B-2" class="anchor"></a><span class="header-link"></span>linux B-2</h5><h6 id="linux-b-2-1"><a href="#linux B-2-1" name="linux B-2-1" class="anchor"></a><span class="header-link"></span>linux B-2-1</h6><h6 id="linux-b-2-2"><a href="#linux B-2-2" name="linux B-2-2" class="anchor"></a><span class="header-link"></span>linux B-2-2</h6><p>Linux可以说是已经无处不在,像Android手机就是以Linux为基础开发的,世界上大多的超级计算机也都采用的Linux系统,大多数的 数据中心使用Linux作为其支撑操作系统。谷歌、百度、淘宝等都通过Linuxt提供了我们每天用的互联网服务。Linux在航空控制系统中也扮演着重 要角色。</p>
<h3 id="-openssl"><a href="#加密互联网的安全协议OpenSSL" name="加密互联网的安全协议OpenSSL" class="anchor"></a><span class="header-link"></span>加密互联网的安全协议OpenSSL</h3><p>OpenSSL是套开放源代码的软件库包,实现了SSL与TLS协议。OpenSSL可以说是一个基于密码学的安全开发包,囊括了主要的密码算法、常用的密钥和证书封装管理功能以及SSL协议,并提供了丰富的应用程序供测试或其它目的使用。</p>
<p>也可以说OpenSSL是网络通信提供安全及数据完整性的一种安全协议,SSL可以在Internet上提供秘密性传输,能使用户/服务器应用之间的通信不被攻击者窃听。OpenSSL被网银、在线支付、电商网站、门户网站、电子邮件等重要网站广泛使用。</p>
<p>去年OpenSSL爆出安全漏洞,因为其应用如此之广,该漏洞爆出让整个互联网都为之震颤。</p>
<h3 id="-mysql"><a href="#互联网的记忆——MySQL" name="互联网的记忆——MySQL" class="anchor"></a><span class="header-link"></span>互联网的记忆——MySQL</h3><p>MySQL是一个开源的小型的数据库管理系统,原开发者为瑞典的MySQL AB公司,该公司于2008年被Sun公司收购。2009年,甲骨文公司(Oracle)收购Sun公司,MySQL成为Oracle旗下产品。</p>
<p>很多信息都是存在数据库里面的,很多工程师在开发一些的小型项目时都会采用这个MySQL数据库。MySQL为C、C++、JAVA、PHP等多重 编程语言提供了API接口。而且支持windows、Mac、Linux等多种系统。这种广泛的支持使其得到更多开发者的青睐,MySQL是开发者需要掌 握的数据库之一。</p>
<p>Mysql最初为小型应用而开发,但现在的Mysql已经不是一个小型数据库了。基本上所有的互联网公司都会使用这个数据库系统,一些金融交易也会 采用Mysql作为数据库引擎。Mysql通过相应的调优既可以支撑大规模的访问,又可以保证数据安全性,已经成为威胁传统商业数据库系统的重要力量。</p>
<h3 id="-eclipse"><a href="#万能开发工具Eclipse" name="万能开发工具Eclipse" class="anchor"></a><span class="header-link"></span>万能开发工具Eclipse</h3><p>Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。Eclipse最初由OTI和IBM两家公司的IDE产品开发组创建,起始于1999年4月。目前由 IBM牵头,围绕着Eclipse项目已经发展成为了一个庞大的Eclipse联盟,有150多家软件公司参与到Eclipse项目中,其中包括 Borland、Rational Software、Red Hat及Sybase等。</p>
<p>就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。很多Java编程软件都是在Eclipse平台开发的,还有包括 Oracle在内的许多大公司也纷纷加入了该项目,并宣称Eclipse将来能成为可进行任何语言开发的IDE集大成者,使用者只需下载各种语言的插件即 可。</p>
<p>Eclipse并不是一个直接服务于消费者的产品,它更像一个工匠手中万用工具,用Eclipse开发者可以打造出各种充满创造性的服务来满足最终用户的需求。</p>
<h3 id="-apache"><a href="#互联网的门卫Apache" name="互联网的门卫Apache" class="anchor"></a><span class="header-link"></span>互联网的门卫Apache</h3><p>Apache HTTP Server(简称Apache)是Apache软件基金会的一个开放源码的网页服务器,可以在大多数计算机操作系统中运行,由于其多平台和安全性被广泛 使用,也是最流行的Web服务器端软件之一,市场占有率达60%左右。它快速、可靠并且可通过简单的API扩展,它可以和各种解释器配合使用,包括 PHP/Perl/Python等。</p>
<p>Apache就像一个负责的门卫,管理着服务器数据的进出。每当你在你的地址栏里输入 <a href="http://XXX.com">http://XXX.com</a> 的时候,在遥远的远端,很有可能正是一台跑着Apache的服务器,将你需要的信息传输给浏览器。</p>
<h3 id="-hadoop"><a href="#大数据的心脏Hadoop" name="大数据的心脏Hadoop" class="anchor"></a><span class="header-link"></span>大数据的心脏Hadoop</h3><p>Hadoop 是一个能够对大量数据进行分布式处理的软件框架,由Apache基金会开发。用户可以在不了解分布式底层细节的情况下,开发分布式程序。Hadoop 一 直帮助解决各种问题,包括超大型数据集的排序和大文件的搜索。它还是各种搜索引擎的核心,比如 Amazon 的 A9 和用于查找酒信息 的 Able Grape 垂直搜索引擎。阿里巴巴集团在商品推荐、用户行为分析、信用计算领域也都有hadoop的应用。</p>
<p>在“大数据”已经成为潮流的当下,Hadoop已经成为最主要的一项技术。可以毫不夸张的说,没有Hadoop,就没有大多数的大数据应用。可以说对一个不知道Hadoop的程序员而言,你已经out了。</p>
<h3 id="-webkit"><a href="#互联网的“排版引擎”WebKit" name="互联网的“排版引擎”WebKit" class="anchor"></a><span class="header-link"></span>互联网的“排版引擎”WebKit</h3><p>说是浏览器内核,其实“排版引擎”更容易理解一些。通过服务器传输给浏览器的信息只是一串乱糟糟的文本。要看到我们平时看到精美的网友,需要浏览器内核对这些文本进行解析,将枯燥的描述“画”成美丽的浏览界面。</p>
<p>WebKit 是一个开源的浏览器引擎,与之相应的引擎有Gecko(Mozilla Firefox 等使用的排版引擎)和Trident(也称为MSHTML,IE 使用的排版引擎)。根据StatCounter的浏览器市场份额调查,于2012年11月,Webkit市占超过了40%,它已经成为拥有最大市场份额的 排版引擎,超越了Internet Explorer所使用的Trident及Firefox所使用的Gecko引擎,并且WebKit份额正在逐年增加。</p>
<p>目前几乎所有网站和网银已经逐渐支持WebKit。WebKit 内核在手机上的应用也十分广泛,例如苹果的Safari、谷歌的Chrome浏览器都是基于这个框架来开发的。</p>
<h3 id="-"><a href="#小结" name="小结" class="anchor"></a><span class="header-link"></span>小结</h3><p>很多人可能尚未意识到,我们使用的电脑中运行有开源软件,手机中运行有开源软件,家里的电视也运行有开源软件,甚至小小的数码产品中也运行有开源软件,尤其是互联网服务器端软件,几乎全部是开源软件。毫不夸张地说,开源软件已经渗透到了我们日常生活的方方面面。</p>
<p>稿源:<a href="http://www.tmtpost.com/194306.html">钛媒体</a></p>
</div>
<!--
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
-->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var container = $(".editormd-preview-container");
var els = [];
container.find("h1").each(function() {
console.log($(this).index(), $(this).slice($(this).index(), $(this).next('h1').index()).html());
els.push($(this));
});
//console.log(els[3]);
// slice,
// prev 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
// prevUntil 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。
// prevAll 查找当前元素之前所有的同辈元素
});
</script>
</body>
</html>
Loading…
Cancel
Save