利用sublime text3 + OmniMarkupPreviewer + CSS 搭建的文档编辑工具

介绍

简介

本文档为在sublime text3中编辑markdown格式文本，结合OmniMarkupPreviewer插件实现在浏览器中展示的效果，用该链接可以在同一个局域网中的任何一台电脑上显示页面，文档的修改能够实时显示。

方式（适用情况）

同事A在自己的电脑上编用sublime text3辑.md后缀的文档(markdown格式)，同事B在自己的电脑上(同一个局域网)直接通过浏览器查看页面，展示效果为markdown；

特点

1. 文档化： 可以为每个项目如接口格式进行文档化，便于查询与修改；
2. 文档修改实时显示：A电脑上的文档修改会实时在B的电脑上显示；
3. 显示效果佳：markdown格式的文本能够显示的内容有(下面列出的是常用的，具体的可以上网搜；)：
   

   • 多级标题
     
   • 有序列(1. 2. 3. 的格式)
     
   • 无序列(以◆,○等格式开头，参考这里的格式)
     
   • 代码
     
   • 表格
     
   • 图片
     
   • 公式
     
   • 加入CSS样式, html元素

工具安装方法

1. sublime text3下载；
2. OmniMarkupPreviewer插件下载；

3. MarkdownTOC 目录插件下载, 使用方法看前面的目录，只要在显示目录的地方加入下面的一行代码，会自动生成目录：

   <!-- MarkdownTOC -->
   <!-- /MarkdownTOC -->

4. 将自己的计算机名字改为英文(不能有中文)！

5. 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>