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

来源：互联网发布：获取json对象的key 编辑：程序博客网时间：2024/06/07 15:27

- 介绍
  - 简介
  - 方式适用情况
  - 特点
  - 工具安装方法
  - 代码高亮
- 引入css
  - - 全文效果
  - 代码段设置
  - 导航
    - 非脚本版
  - 并排表格

介绍

简介

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

方式（适用情况）

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

特点

文档化：可以为每个项目如接口格式进行文档化，便于查询与修改；
文档修改实时显示：A电脑上的文档修改会实时在B的电脑上显示；
显示效果佳：markdown格式的文本能够显示的内容有(下面列出的是常用的，具体的可以上网搜；)：
- 多级标题
- 有序列(1. 2. 3. 的格式)
- 无序列(以◆,○等格式开头，参考这里的格式)
- 代码
- 表格
- 图片
- 公式
- 加入CSS样式, html元素

工具安装方法

sublime text3下载；
OmniMarkupPreviewer插件下载；
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;}

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

0 0