介绍
简介
本文档为在sublime text3中编辑markdown格式文本,结合OmniMarkupPreviewer插件实现在浏览器中展示的效果,用该链接可以在同一个局域网中的任何一台电脑上显示页面,文档的修改能够实时显示。
方式(适用情况)
同事A在自己的电脑上编用sublime text3辑.md后缀的文档(markdown格式),同事B在自己的电脑上(同一个局域网)直接通过浏览器查看页面,展示效果为markdown;
特点
- 文档化: 可以为每个项目如接口格式进行文档化,便于查询与修改;
- 文档修改实时显示:A电脑上的文档修改会实时在B的电脑上显示;
- 显示效果佳:markdown格式的文本能够显示的内容有(下面列出的是常用的,具体的可以上网搜;):
- 多级标题
- 有序列(1. 2. 3. 的格式)
- 无序列(以◆,○等格式开头,参考这里的格式)
- 代码
- 表格
- 图片
- 公式
- 加入CSS样式, html元素
- 多级标题
工具安装方法
- sublime text3下载;
- OmniMarkupPreviewer插件下载;
MarkdownTOC 目录插件下载, 使用方法看前面的目录,只要在显示目录的地方加入下面的一行代码,会自动生成目录:
<!-- MarkdownTOC --> <!-- /MarkdownTOC -->
将自己的计算机名字改为英文(不能有中文)!
ctrl + alt + o
会在本地浏览器打开页面,页面的地址为ip+port的格式, 这样在同一个局域网下,都可以通过该链接访问这个页面;
代码高亮
OmniMarkupPreviewer.sublime-settings文本里, 在extensions
键后面可以设置一些扩展, 如codehilite
为代码高亮, 当然使用时需要在代码起始的后面说明代码种类,如 “`js.
引入css
可以在文档中引入css, 如自定义字体, 背景颜色等;
全文效果
// work.md
*css{
font-family: '黑体'
}
.markdown-body{
color: #545454;
}
h1, h2, h3, h4{
color: #FF911E;
}
代码段设置
.codehilite>pre{
background: #2E2C2B;
color: #C4C4C4;
font-size: 16px;
border-radius: 6px;
padding: 3px 6px;
}
导航
非脚本版
我没有去写脚本将所有的标题导出为导航, 这里的方法是在需要导航的地方加上
{#mk_Id}
, 这样等同于在html加上了一个id = 'mk_Id'
, 在导航里通过href
就可以实现导航.
在需要导航的地方加入如下html元素:
<div class = 'nav'>
<ul>
<li>[mark1](#mk1)</li>
</ul>
</div>
CSS样式如下:
.nav{
border-radius: 6px;
position: fixed;
left: 10px;
top: 10px;
z-index: 99;
color: #494949;
background: rgba(73, 73, 73, 0.1);
font-size: 16px;
width: 150px;
text-align: center;
}
.nav:hover{
background: rgba(73, 73, 73, 0.9);
}
.nav>ul{
list-style: none;
padding-top: 10px;
}
并排表格
利用
display:inline-block
将多个表格并列到一行;
- 注:不知道为什么,上面的表格在加入div后,在马克飞象下不能正常显示,但在sublime下转到页面后是没有问题的,好像时马克的表格放于div中会冲突;
<div style='display:block;'>
//表格1
<div style='margin-right:45px;display:inline-block'>
表格1:
|名字|年龄|
|---|---|
|小明|20|
|小花|20|
</div>
//表格2
<div style='margin-right:45px;display:inline-block'>
表格2:
|名字|年龄|
|---|---|
|小明|20|
|小花|20|
</div>
</div>