You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
educoder/public/editormd/examples/toc.html

199 lines
12 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>TOC - Editor.md examples</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="../css/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
<style>
#custom-toc-container {
border: 1px solid #ddd;
width: 90%;
margin: 0 auto 15px;
overflow: visible;
}
#custom-toc-container > .markdown-toc {
padding: 10px;
}
</style>
</head>
<body>
<div id="layout">
<header>
<h1>TOC (Table of Contents) example</h1>
</header>
<div class="btns">
<button id="insert-btn">ToC insert to custom container</button>
<button id="menu-btn">ToC Dropdown menu</button>
<button id="menu2-btn">ToC Dropdown menu insert to custom container</button>
<button id="default-btn">Default</button>
<button id="tocm-btn">Enable [TOCM]</button>
</div>
<div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
<div id="test-editormd">
<textarea style="display:none;"># 支撑起整个互联网时代的 7 款开源软件
[TOCM]
[TOC]
开源软件现在成为整个互联网时代的支撑技术,你可能已经无法离开由开源软件构建起来的网络世界了。下面我们就来看看一些最重要的开源技术。
### 为互联网而生的操作系统linux
Linux是一款免费的操作系统诞生于1991年用户可以通过网络或其他途径免费获得并可以任意修改其源代码。
#### linux A
它能运行主要的UNIX工具软件、应用程序和网络协议。它支持32位和64位硬件。Linux继承了Unix以网络为核心的设计思想是一个性能稳 定的多用户网络操作系统。这个系统是由全世界各地的成千上万的程序员设计和实现的。其目的是建立不受任何商品化软件的版权制约的、全世界都能自由使用的 Unix兼容产品。
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading, Test link heading, [linux B](https://github.com/pandao/editor.md) Test link heading
##### 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了。
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading
#### Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading [linux B](https://github.com/pandao/editor.md) Test link heading, Test link heading, [linux B](https://github.com/pandao/editor.md) Test link heading
##### linux B-1
###### linux B-1-1
###### linux B-1-2
##### linux B-2
###### linux B-2-1
###### linux B-2-2
### 互联网的“排版引擎”WebKit
说是浏览器内核,其实“排版引擎”更容易理解一些。通过服务器传输给浏览器的信息只是一串乱糟糟的文本。要看到我们平时看到精美的网友,需要浏览器内核对这些文本进行解析,将枯燥的描述“画”成美丽的浏览界面。
WebKit 是一个开源的浏览器引擎,与之相应的引擎有 GeckoMozilla Firefox 等使用的排版引擎)和 Trident也称为 MSHTMLIE 使用的排版引擎)。根据 StatCounter 的浏览器市场份额调查于2012年11月Webkit 市占超过了 40%,它已经成为拥有最大市场份额的 排版引擎,超越了 Internet Explorer 所使用的Trident 及 Firefox 所使用的 Gecko 引擎,并且 WebKit 份额正在逐年增加。
目前几乎所有网站和网银已经逐渐支持 WebKit 。WebKit 内核在手机上的应用也十分广泛,例如苹果的 Safari 、谷歌的 Chrome 浏览器都是基于这个框架来开发的。
### 小结
很多人可能尚未意识到,我们使用的电脑中运行有开源软件,手机中运行有开源软件,家里的电视也运行有开源软件,甚至小小的数码产品中也运行有开源软件,尤其是互联网服务器端软件,几乎全部是开源软件。毫不夸张地说,开源软件已经渗透到了我们日常生活的方方面面。
稿源:[钛媒体](http://www.tmtpost.com/194306.html)
</textarea>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="../editormd.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd("test-editormd", {
width : "90%",
height : 720,
path : "../lib/",
//toc : false, // diable ToC
tocStartLevel : 2 // Parse beginning of H2, Default value 1
});
$("#insert-btn").click(function() {
testEditor.config({
tocContainer : "#custom-toc-container",
tocDropdown : false
});
});
$("#menu-btn").click(function(){
testEditor.config({
tocContainer : "",
tocDropdown : true,
tocTitle : "目录 Table of Contents dsfsadfsfdsdf",
});
});
$("#menu2-btn").click(function(){
testEditor.config({
tocContainer : "#custom-toc-container",
tocDropdown : true,
tocTitle : "目录 Table of Contents dsfsadfsfdsdf",
});
});
$("#default-btn").click(function() {
$("#custom-toc-container").html("#custom-toc-container");
testEditor.config({
tocContainer : "",
tocm : false,
tocDropdown : false
});
});
$("#tocm-btn").click(function() {
$("#custom-toc-container").html("#custom-toc-container");
testEditor.config({
tocm : true,
tocContainer : "",
tocDropdown : false
});
});
});
</script>
</body>
</html>