Markdown 编辑器帖子样本演示

[复制链接]
查看414 | 回复2 | 2022-4-28 11:17:56 | 显示全部楼层 |阅读模式

Steam 社区昵称:***查看资料 资料加为 Steam 好友 加好友聊天(须为 Steam 好友) 聊天查看库存 库存查看截图 截图查看好友 好友查看群组 群组查看愿望单 愿望本人推荐 推荐 查看资料 Ta的皮肤

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
[xmd]# Hello World 文章

这是一个测试文章。~~什么东西都有~~ 是**不可能**的。*按时更新想想就好了*。

## 弄了一个表格

| 实际速度 |  加速度  |
|----------|----------|
| 0        |          |
| 21.48438 | 21.48438 |
| 36.46875 | 14.98438 |
| 51.45313 | 14.98438 |
| 66.4375  | 14.98438 |
| 81.42187 | 14.98437 |
| 96.29073 | 14.86886 |
| 109.9515 | 13.66075 |
| 122.5023 | 12.55082 |

### 主要特性

- 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
- 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
- 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
- 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
- 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
- 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
- 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
- 支持自定义主题样式;

支持 jpg、png、gif、svg 等图片格式,**其中 svg 文件仅可在微信公众平台中使用**,svg 文件示例如下:

![](https://bbs.upkk.com/static/image/xnet_custom/i-am-svg.svg)

# 测试文本

**目录 (Table of Contents)**

[TOCM]

[TOC]

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
# Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
#### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")

#### 标题(用底线的形式)Heading (underline)

This is an H1
=============

This is an H2
-------------

### 字符效果和横线等
               
----

~~删除线~~ <s>删除线(开启识别HTML标签时)</s>
*斜体字*      _斜体字_
**粗体**  __粗体__
***粗斜体*** ___粗斜体___

上标:X<sub>2</sub>,下标:O<sup>2</sup>

**缩写(同HTML的abbr标签)**

> 即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启

The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.

### 引用 Blockquotes

> 引用文本 Blockquotes

引用的行内混合 Blockquotes
                    
> 引用:如果想要插入空白换行`即<br />标签`,在插入处先键入两个以上的空格然后回车即可,[普通链接](http://localhost/)。

### 锚点与链接 Links

[普通链接](http://localhost/)

[普通链接带标题](http://localhost/ "普通链接带标题")

直接链接:<https://github.com>

[锚点链接][anchor-id]

[anchor-id]: http://www.this-anchor-link.com/

GFM a-tail link @pandao

> @pandao

### 多语言代码高亮 Codes

#### 行内代码 Inline code

执行命令:`npm install marked`

#### 缩进风格

即缩进四个空格,也做为实现类似`<pre>`预格式化文本(Preformatted Text)的功能。

    <?php
        echo "Hello world!";
    ?>
   
预格式化文本:

    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |

#### JS代码 

```javascript
function test(){
    console.log("Hello world!");
}

(function(){
    var box = function(){
        return box.fn.init();
    };

    box.prototype = box.fn = {
        init : function(){
            console.log('box.init()');

            return this;
        },

        add : function(str){
            alert("add", str);

            return this;
        },

        remove : function(str){
            alert("remove", str);

            return this;
        }
    };
   
    box.fn.init.prototype = box.fn;
   
    window.box =box;
})();

var testBox = box();
testBox.add("jQuery").remove("jQuery");
```

#### HTML代码 HTML codes

```html
<!DOCTYPE html>
<html>
    <head>
        <mate charest="utf-8" />
        <title>Hello world!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>
```

### 图片 Images


> 图为:厦门白城沙滩

图片加链接 (Image + Link):

![](./data/attachment/forum/202204/28/170359ml7r7giilnwwmggg.jpg)

![](./data/attachment/forum/202204/28/170424tlwzqejdtnwnsa99.jpg)

> 图为:李健首张专辑《似水流年》封面
               
----

### 列表 Lists

#### 无序列表(减号)Unordered Lists (-)
               
- 列表一
- 列表二
- 列表三
     
#### 无序列表(星号)Unordered Lists (*)

* 列表一
* 列表二
* 列表三

#### 无序列表(加号和嵌套)Unordered Lists (+)
               
+ 列表一
+ 列表二
    + 列表二-1
    + 列表二-2
    + 列表二-3
+ 列表三
    * 列表一
    * 列表二
    * 列表三

#### 有序列表 Ordered Lists (-)
               
1. 第一行
2. 第二行
3. 第三行

#### GFM task list

- [x] GFM task list 1
- [x] GFM task list 2
- [ ] GFM task list 3
    - [ ] GFM task list 3-1
    - [ ] GFM task list 3-2
    - [ ] GFM task list 3-3
- [ ] GFM task list 4
    - [ ] GFM task list 4-1
    - [ ] GFM task list 4-2
               
----
                    
### 绘制表格 Tables

| 项目        | 价格   |  数量  |
| --------   | -----:  | :----:  |
| 计算机      | $1600   |   5     |
| 手机        |   $12   |   12   |
| 管线        |    $1    |  234  |
                    
First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

| Function name | Description                    |
| ------------- | ------------------------------ |
| `help()`      | Display the help window.       |
| `destroy()`   | **Destroy your computer!**     |

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |
               
----

#### 特殊符号 HTML Entities Codes

X² Y³ ¾ ¼  ×  ÷   »

18ºC  "  '

### Emoji表情
:tw-1f435: :tw-1f436: :tw-1f437::tw-1f4af: :tw-1f51f: :tw-1f51e: :tw-1f51d: :tw-1f51c: :tw-1f51b: :tw-1f51a: :tw-1f517: :tw-1f515: :tw-1f514: :tw-1f528: :tw-1f527: :tw-1f513: :tw-1f512: :tw-1f525: :tw-1f524:

> Blockquotes :star:

#### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:

#### 反斜杠 Escape

\*literal asterisks\*
            
### 科学公式 TeX(KaTeX)
                    
$$E=mc^2$$

行内的公式$$E=mc^2$$行内的公式,行内的$$E=mc^2$$公式。

$$\(\sqrt{3x-1}+(1+x)^2\)$$
                    
$$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$

多行公式:

```math
\displaystyle
\left( \sum\_{k=1}^n a\_k b\_k \right)^2
\leq
\left( \sum\_{k=1}^n a\_k^2 \right)
\left( \sum\_{k=1}^n b\_k^2 \right)
```

```katex
\displaystyle
    \frac{1}{
        \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
        \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
        1+\frac{e^{-6\pi}}
        {1+\frac{e^{-8\pi}}
         {1+\cdots} }
        }
    }
```

```latex
f(x) = \int_{-\infty}^\infty
    \hat f(\xi)\,e^{2 \pi i \xi x}
    \,d\xi
```
               
### 绘制流程图 Flowchart

```flow
st=>start: 用户登陆
op=>operation: 登陆操作
cond=>condition: 登陆成功 Yes or No?
e=>end: 进入后台

st->op->cond
cond(yes)->e
cond(no)->op
```
                    
### 绘制序列图 Sequence Diagram
                    
```seq
Andrew->China: Says Hello
Note right of China: China thinks\nabout it
China-->Andrew: How are you?
Andrew->>China: I am good thanks!
```

### End


    # Hello World 文章
   
    这是一个测试文章。~~什么东西都有~~ 是**不可能**的。*按时更新想想就好了*。
   
    ## 弄了一个表格
   
    | 实际速度 |  加速度  |
    |----------|----------|
    | 0        |          |
    | 21.48438 | 21.48438 |
    | 36.46875 | 14.98438 |
    | 51.45313 | 14.98438 |
    | 66.4375  | 14.98438 |
    | 81.42187 | 14.98437 |
    | 96.29073 | 14.86886 |
    | 109.9515 | 13.66075 |
    | 122.5023 | 12.55082 |
   
    ### 主要特性
   
    - 支持“标准”Markdown / CommonMark和Github风格的语法,也可变身为代码编辑器;
    - 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能;
    - 支持ToC(Table of Contents)、Emoji表情、Task lists、@链接等Markdown扩展语法;
    - 支持TeX科学公式(基于KaTeX)、流程图 Flowchart 和 时序图 Sequence Diagram;
    - 支持识别和解析HTML标签,并且支持自定义过滤标签解析,具有可靠的安全性和几乎无限的扩展性;
    - 支持 AMD / CMD 模块化加载(支持 Require.js & Sea.js),并且支持自定义扩展插件;
    - 兼容主流的浏览器(IE8+)和Zepto.js,且支持iPad等平板设备;
    - 支持自定义主题样式;
   
    # 测试文本
   
    **目录 (Table of Contents)**
   
    [TOCM]
   
    [TOC]
   
    # Heading 1
    ## Heading 2
    ### Heading 3
    #### Heading 4
    ##### Heading 5
    ###### Heading 6
    # Heading 1 link [Heading link](https://github.com/pandao/editor.md "Heading link")
    ## Heading 2 link [Heading link](https://github.com/pandao/editor.md "Heading link")
    ### Heading 3 link [Heading link](https://github.com/pandao/editor.md "Heading link")
    #### Heading 4 link [Heading link](https://github.com/pandao/editor.md "Heading link") Heading link [Heading link](https://github.com/pandao/editor.md "Heading link")
    ##### Heading 5 link [Heading link](https://github.com/pandao/editor.md "Heading link")
    ###### Heading 6 link [Heading link](https://github.com/pandao/editor.md "Heading link")
   
    #### 标题(用底线的形式)Heading (underline)
   
    This is an H1
    =============
   
    This is an H2
    -------------
   
    ### 字符效果和横线等
                    
    ----
   
    ~~删除线~~ <s>删除线(开启识别HTML标签时)</s>
    *斜体字*      _斜体字_
    **粗体**  __粗体__
    ***粗斜体*** ___粗斜体___
   
    上标:X<sub>2</sub>,下标:O<sup>2</sup>
   
    **缩写(同HTML的abbr标签)**
   
    > 即更长的单词或短语的缩写形式,前提是开启识别HTML标签时,已默认开启
   
    The <abbr title="Hyper Text Markup Language">HTML</abbr> specification is maintained by the <abbr title="World Wide Web Consortium">W3C</abbr>.
   
    ### 引用 Blockquotes
   
    > 引用文本 Blockquotes
   
    引用的行内混合 Blockquotes
                        
    > 引用:如果想要插入空白换行`即<br />标签`,在插入处先键入两个以上的空格然后回车即可,[普通链接](http://localhost/)。
   
    ### 锚点与链接 Links
   
    [普通链接](http://localhost/)
   
    [普通链接带标题](http://localhost/ "普通链接带标题")
   
    直接链接:<https://github.com>
   
    [锚点链接][anchor-id]
   
    [anchor-id]: http://www.this-anchor-link.com/
   
    GFM a-tail link @pandao
   
    > @pandao
   
    ### 多语言代码高亮 Codes
   
    #### 行内代码 Inline code
   
    执行命令:`npm install marked`
   
    #### 缩进风格
   
    即缩进四个空格,也做为实现类似`<pre>`预格式化文本(Preformatted Text)的功能。
   
        <?php
            echo "Hello world!";
        ?>
        
    预格式化文本:
   
        | First Header  | Second Header |
        | ------------- | ------------- |
        | Content Cell  | Content Cell  |
        | Content Cell  | Content Cell  |
   
    #### JS代码 
   
    ```javascript
  
    #### HTML代码 HTML codes
   
    ```html
    <!DOCTYPE html>
   
    </html>
    ```
   
    ### 图片 Images
   
    Image:
   
    ![]()
   
    > Follow your heart.
   
    ![]()
   
    > 图为:厦门白城沙滩
   
    图片加链接 (Image + Link):
   
    [![]()]( "李健首张专辑《似水流年》封面")
   
    > 图为:李健首张专辑《似水流年》封面
                    
    ----
   
    ### 列表 Lists
   
    #### 无序列表(减号)Unordered Lists (-)
                    
    - 列表一
    - 列表二
    - 列表三
         
    #### 无序列表(星号)Unordered Lists (*)
   
    * 列表一
    * 列表二
    * 列表三
   
    #### 无序列表(加号和嵌套)Unordered Lists (+)
                    
    + 列表一
    + 列表二
        + 列表二-1
        + 列表二-2
        + 列表二-3
    + 列表三
        * 列表一
        * 列表二
        * 列表三
   
    #### 有序列表 Ordered Lists (-)
                    
    1. 第一行
    2. 第二行
    3. 第三行
   
    #### GFM task list
   
    - [x] GFM task list 1
    - [x] GFM task list 2
    - [ ] GFM task list 3
        - [ ] GFM task list 3-1
        - [ ] GFM task list 3-2
        - [ ] GFM task list 3-3
    - [ ] GFM task list 4
        - [ ] GFM task list 4-1
        - [ ] GFM task list 4-2
                    
    ----
                        
    ### 绘制表格 Tables
   
    | 项目        | 价格   |  数量  |
    | --------   | -----:  | :----:  |
    | 计算机      | $1600   |   5     |
    | 手机        |   $12   |   12   |
    | 管线        |    $1    |  234  |
                        
    First Header  | Second Header
    ------------- | -------------
    Content Cell  | Content Cell
    Content Cell  | Content Cell
   
    | First Header  | Second Header |
    | ------------- | ------------- |
    | Content Cell  | Content Cell  |
    | Content Cell  | Content Cell  |
   
    | Function name | Description                    |
    | ------------- | ------------------------------ |
    | `help()`      | Display the help window.       |
    | `destroy()`   | **Destroy your computer!**     |
   
    | Left-Aligned  | Center Aligned  | Right Aligned |
    | :------------ |:---------------:| -----:|
    | col 3 is      | some wordy text | $1600 |
    | col 2 is      | centered        |   $12 |
    | zebra stripes | are neat        |    $1 |
   
    | Item      | Value |
    | --------- | -----:|
    | Computer  | $1600 |
    | Phone     |   $12 |
    | Pipe      |    $1 |
                    
    ----
   
    #### 特殊符号 HTML Entities Codes
   
    X² Y³ ¾ ¼  ×  ÷   »
   
    18ºC  "  '
   
    ### Emoji表情
    :tw-1f435: :tw-1f436: :tw-1f437::tw-1f4af: :tw-1f51f: :tw-1f51e: :tw-1f51d: :tw-1f51c: :tw-1f51b: :tw-1f51a: :tw-1f517: :tw-1f515: :tw-1f514: :tw-1f528: :tw-1f527: :tw-1f513: :tw-1f512: :tw-1f525: :tw-1f524:
   
    > Blockquotes :star:
   
    #### GFM task lists & Emoji & fontAwesome icon emoji & editormd logo emoji :editormd-logo-5x:
   
    #### 反斜杠 Escape
   
    \*literal asterisks\*
               
    ### 科学公式 TeX(KaTeX)
                        
    $$E=mc^2$$
   
    行内的公式$$E=mc^2$$行内的公式,行内的$$E=mc^2$$公式。
   
    $$\(\sqrt{3x-1}+(1+x)^2\)$$
                        
    $$\sin(\alpha)^{\theta}=\sum_{i=0}^{n}(x^i + \cos(f))$$
   
    多行公式:
   
    ```math
    \displaystyle
    \left( \sum\_{k=1}^n a\_k b\_k \right)^2
    \leq
    \left( \sum\_{k=1}^n a\_k^2 \right)
    \left( \sum\_{k=1}^n b\_k^2 \right)
    ```
   
    ```katex
    \displaystyle
        \frac{1}{
            \Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{
            \frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
            1+\frac{e^{-6\pi}}
            {1+\frac{e^{-8\pi}}
             {1+\cdots} }
            }
        }
    ```
   
    ```latex
    f(x) = \int_{-\infty}^\infty
        \hat f(\xi)\,e^{2 \pi i \xi x}
        \,d\xi
    ```
                    
    ### 绘制流程图 Flowchart
   
    ```flow
    st=>start: 用户登陆
    op=>operation: 登陆操作
    cond=>condition: 登陆成功 Yes or No?
    e=>end: 进入后台
   
    st->op->cond
    cond(yes)->e
    cond(no)->op
    ```
                        
    ### 绘制序列图 Sequence Diagram
                        
    ```seq
    Andrew->China: Says Hello
    Note right of China: China thinks\nabout it
    China-->Andrew: How are you?
    Andrew->>China: I am good thanks!
    ```
   
    ### End




            
            
            
            
            
            
            
回复

使用道具 举报

T***VIP会员 永久VIP | 2022-4-29 12:05:38 | 显示全部楼层

Steam 社区昵称:***查看资料 资料加为 Steam 好友 加好友聊天(须为 Steam 好友) 聊天查看库存 库存查看截图 截图查看好友 好友查看群组 群组查看愿望单 愿望本人推荐 推荐 查看资料 Ta的皮肤

[xmd]
   
    一个不纯粹的PHPer,一个不自由的 gopher 。
   
   
   

# 样本案例2

[![Build Status](https://travis-ci.org/lifei6671/mindoc.svg?branch=master)](https://travis-ci.org/lifei6671/mindoc)

MinDoc 是一款针对IT团队开发的简单好用的文档管理系统。

MinDoc 的前身是 SmartWiki 文档系统。SmartWiki 是基于 PHP 框架 laravel 开发的一款文档管理系统。因 PHP 的部署对普通用户来说太复杂,所以改用 Golang 开发。可以方便用户部署和实用。

开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。

可以用来储存日常接口文档,数据库字典,手册说明等文档。内置项目管理,用户管理,权限管理等功能,能够满足大部分中小团队的文档管理需求。

演示站点: [http://doc.iminho.me](http://doc.iminho.me)

# 安装与使用

**如果你的服务器上没有安装golang程序请手动设置一个环境变量如下:键名为 ZONEINFO,值为MinDoc跟目录下的/lib/time/zoneinfo.zip 。**

**Windows 教程:** [https://github.com/mindoc-org/mindoc/blob/master/README_WIN.md](docs/README_WIN.md)

**Linux  教程:** &nbsp;[https://github.com/mindoc-org/mindoc/blob/master/README_LINUX.md](docs/README_LINUX.md)

**PDF 导出配置教程** &nbsp;[https://github.com/mindoc-org/mindoc/blob/master/docs/README_LINUX.md](docs/WKHTMLTOPDF.md)

对于没有Golang使用经验的用户,可以从 [https://github.com/mindoc-org/mindoc/releases](https://github.com/mindoc-org/mindoc/releases) 这里下载编译完的程序。

如果有Golang开发经验,建议通过编译安装。

```bash
git clone https://github.com/mindoc-org/mindoc.git

go get -d ./...

go build -ldflags "-w"

```

MinDoc 使用MySQL储存数据,且编码必须是`utf8mb4_general_ci`。请在安装前,把数据库配置填充到项目目录下的 conf/app.conf 中。

如果conf目录下不存在 app.conf 请重命名 app.conf.example 为 app.conf。

如果 MinDoc 根目录下存在 install.lock 文件表示已经初始化过数据库,想要重新初始化数据库,只需要删除该文件重新启动程序即可。

**默认程序会自动创建表,同时初始化一个超级管理员用户:admin 密码:123456 。请登录后重新设置密码。**

## Linux 下后台运行

在 Linux 如果想让程序后台运行可以执行如下命令:

```bash
#使程序后台运行
nohup ./godoc &amp;
```

该命令会使程序后台执行,但是服务器重启后不会自动启动服务。

使用 supervisor 做服务,可以使服务器重启后自动重启 MinDoc。

## Windows 下后台运行

Windows 下后台运行需要借助 CMD 命令行命令:

```bash
#在MinDoc根目录下新建一个slave.vbs文件:

Set ws = CreateObject("Wscript.Shell")
ws.run "cmd /c start.bat",vbhide

#再建一个start.bat文件:
@echo off

godoc_windows_amd64.exe

```

启动时双击slave.vbs即可,等待程序初始化完数据库会在该目录下创建一个install.lock文件,标识已安装成功。

如果是自己编译,可以用以下命令即可编译出不依赖cmd命令的后台运行的程序:

```bash
go build -ldflags "-H=windowsgui"
```
通过该命令编译的Golang程序在Windows上默认后台运行。

请将将 MinDoc 加入开机启动列表,使程序开机启动。

## 密码找回功能

密码找回功能依赖邮件服务,因此,需要配置邮件服务才能使用该功能,该配置位于 `conf/app.conf` 中:

```bash

#邮件配置
#是否启用邮件
enable_mail=true
#smtp服务器的账号
[email protected]
#smtp服务器的地址
smtp_host=smtp.ym.163.com
#密码
smtp_password=1q2w3e__ABC
#端口号
smtp_port=25
#邮件发送人的地址
[email protected]
#邮件有效期30分钟
mail_expired=30
```


# 使用Docker部署

如果是Docker用户,可参考项目内置的Dockerfile文件编译镜像。

在启动镜像时需要提供如下的环境变量:

```ini
MYSQL_PORT_3306_TCP_ADDR    MySQL地址
MYSQL_PORT_3306_TCP_PORT    MySQL端口号
MYSQL_INSTANCE_NAME         MySQL数据库名称
MYSQL_USERNAME              MySQL账号
MYSQL_PASSWORD              MySQL密码
HTTP_PORT                   程序监听的端口号
```

举个栗子

```bash
docker run -p 8181:8181 -e MYSQL_PORT_3306_TCP_ADDR=127.0.0.1 -e MYSQL_PORT_3306_TCP_PORT=3306 -e MYSQL_INSTANCE_NAME=mindoc_db -e MYSQL_USERNAME=root -e MYSQL_PASSWORD=123456 -e httpport=8181 -d daocloud.io/lifei6671/mindoc:latest
```

# 项目截图

**创建项目**

![创建项目](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204438.png)

**项目列表**

![项目列表](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203542.png)

**项目概述**

![项目概述](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203619.png)

**项目成员**

![项目成员](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203637.png)

**项目设置**

![项目设置](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203656.png)

**基于Editor.md开发的Markdown编辑器**

![基于Editor.md开发的Markdown编辑器](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203854.png)

**基于wangEditor开发的富文本编辑器**

![基于wangEditor开发的富文本编辑器](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204651.png)

**项目预览**

![项目预览](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204609.png)

**超级管理员后台**

![超级管理员后台](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204710.png)


# 使用的技术

- beego 1.8.1
- mysql 5.6
- editor.md
- bootstrap 3.2
- jquery 库
- layer 弹出层框架
- webuploader 文件上传框架
- Nprogress 库
- jstree 树状结构库
- font awesome 字体库
- cropper 图片剪裁库
- layer 弹出层框架
- highlight 代码高亮库
- to-markdown HTML转Markdown库
- wangEditor 富文本编辑器


# 主要功能

- 项目管理,可以对项目进行编辑更改,成员添加等。
- 文档管理,添加和删除文档等。
- 评论管理,可以管理文档评论和自己发布的评论。
- 用户管理,添加和禁用用户,个人资料更改等。
- 用户权限管理 , 实现用户角色的变更。
- 项目加密,可以设置项目公开状态,私有项目需要通过Token访问。
- 站点配置,可开启匿名访问、验证码等。

# 参与开发

我们欢迎您在 MinDoc 项目的 GitHub 上报告 issue 或者 pull request。

如果您还不熟悉GitHub的Fork and Pull开发模式,您可以阅读GitHub的文档(https://help.github.com/articles/using-pull-requests) 获得更多的信息。

# 关于作者

一个不纯粹的PHPer,一个不自由的 gopher 。



    # 样本案例2
   
    [![Build Status](https://travis-ci.org/lifei6671/mindoc.svg?branch=master)](https://travis-ci.org/lifei6671/mindoc)
   
    MinDoc 是一款针对IT团队开发的简单好用的文档管理系统。
   
    MinDoc 的前身是 SmartWiki 文档系统。SmartWiki 是基于 PHP 框架 laravel 开发的一款文档管理系统。因 PHP 的部署对普通用户来说太复杂,所以改用 Golang 开发。可以方便用户部署和实用。
   
    开发缘起是公司IT部门需要一款简单实用的项目接口文档管理和分享的系统。其功能和界面源于 kancloud 。
   
    可以用来储存日常接口文档,数据库字典,手册说明等文档。内置项目管理,用户管理,权限管理等功能,能够满足大部分中小团队的文档管理需求。
   
    演示站点: [http://doc.iminho.me](http://doc.iminho.me)
   
    # 安装与使用
   
    **如果你的服务器上没有安装golang程序请手动设置一个环境变量如下:键名为 ZONEINFO,值为MinDoc跟目录下的/lib/time/zoneinfo.zip 。**
   
    **Windows 教程:** [https://github.com/mindoc-org/mindoc/blob/master/README_WIN.md](docs/README_WIN.md)
   
    **Linux  教程:** &nbsp;[https://github.com/mindoc-org/mindoc/blob/master/README_LINUX.md](docs/README_LINUX.md)
   
    **PDF 导出配置教程** &nbsp;[https://github.com/mindoc-org/mindoc/blob/master/docs/README_LINUX.md](docs/WKHTMLTOPDF.md)
   
    对于没有Golang使用经验的用户,可以从 [https://github.com/mindoc-org/mindoc/releases](https://github.com/mindoc-org/mindoc/releases) 这里下载编译完的程序。
   
    如果有Golang开发经验,建议通过编译安装。
   
    ```bash
    git clone https://github.com/mindoc-org/mindoc.git
   
    go get -d ./...
   
    go build -ldflags "-w"
   
    ```
   
    MinDoc 使用MySQL储存数据,且编码必须是`utf8mb4_general_ci`。请在安装前,把数据库配置填充到项目目录下的 conf/app.conf 中。
   
    如果conf目录下不存在 app.conf 请重命名 app.conf.example 为 app.conf。
   
    如果 MinDoc 根目录下存在 install.lock 文件表示已经初始化过数据库,想要重新初始化数据库,只需要删除该文件重新启动程序即可。
   
    **默认程序会自动创建表,同时初始化一个超级管理员用户:admin 密码:123456 。请登录后重新设置密码。**
   
    ## Linux 下后台运行
   
    在 Linux 如果想让程序后台运行可以执行如下命令:
   
    ```bash
    #使程序后台运行
    nohup ./godoc &amp;
    ```
   
    该命令会使程序后台执行,但是服务器重启后不会自动启动服务。
   
    使用 supervisor 做服务,可以使服务器重启后自动重启 MinDoc。
   
    ## Windows 下后台运行
   
    Windows 下后台运行需要借助 CMD 命令行命令:
   
    ```bash
    #在MinDoc根目录下新建一个slave.vbs文件:
   
    Set ws = CreateObject("Wscript.Shell")
    ws.run "cmd /c start.bat",vbhide
   
    #再建一个start.bat文件:
    @echo off
   
    godoc_windows_amd64.exe
   
    ```
   
    启动时双击slave.vbs即可,等待程序初始化完数据库会在该目录下创建一个install.lock文件,标识已安装成功。
   
    如果是自己编译,可以用以下命令即可编译出不依赖cmd命令的后台运行的程序:
   
    ```bash
    go build -ldflags "-H=windowsgui"
    ```
    通过该命令编译的Golang程序在Windows上默认后台运行。
   
    请将将 MinDoc 加入开机启动列表,使程序开机启动。
   
    ## 密码找回功能
   
    密码找回功能依赖邮件服务,因此,需要配置邮件服务才能使用该功能,该配置位于 `conf/app.conf` 中:
   
    ```bash
   
    #邮件配置
    #是否启用邮件
    enable_mail=true
    #smtp服务器的账号
    [email protected]
    #smtp服务器的地址
    smtp_host=smtp.ym.163.com
    #密码
    smtp_password=1q2w3e__ABC
    #端口号
    smtp_port=25
    #邮件发送人的地址
    [email protected]
    #邮件有效期30分钟
    mail_expired=30
    ```
   
   
    # 使用Docker部署
   
    如果是Docker用户,可参考项目内置的Dockerfile文件编译镜像。
   
    在启动镜像时需要提供如下的环境变量:
   
    ```ini
    MYSQL_PORT_3306_TCP_ADDR    MySQL地址
    MYSQL_PORT_3306_TCP_PORT    MySQL端口号
    MYSQL_INSTANCE_NAME         MySQL数据库名称
    MYSQL_USERNAME              MySQL账号
    MYSQL_PASSWORD              MySQL密码
    HTTP_PORT                   程序监听的端口号
    ```
   
    举个栗子
   
    ```bash
    docker run -p 8181:8181 -e MYSQL_PORT_3306_TCP_ADDR=127.0.0.1 -e MYSQL_PORT_3306_TCP_PORT=3306 -e MYSQL_INSTANCE_NAME=mindoc_db -e MYSQL_USERNAME=root -e MYSQL_PASSWORD=123456 -e httpport=8181 -d daocloud.io/lifei6671/mindoc:latest
    ```
   
    # 项目截图
   
    **创建项目**
   
    ![创建项目](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204438.png)
   
    **项目列表**
   
    ![项目列表](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203542.png)
   
    **项目概述**
   
    ![项目概述](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203619.png)
   
    **项目成员**
   
    ![项目成员](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203637.png)
   
    **项目设置**
   
    ![项目设置](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203656.png)
   
    **基于Editor.md开发的Markdown编辑器**
   
    ![基于Editor.md开发的Markdown编辑器](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501203854.png)
   
    **基于wangEditor开发的富文本编辑器**
   
    ![基于wangEditor开发的富文本编辑器](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204651.png)
   
    **项目预览**
   
    ![项目预览](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204609.png)
   
    **超级管理员后台**
   
    ![超级管理员后台](https://raw.githubusercontent.com/lifei6671/mindoc/master/uploads/20170501204710.png)
   
   
    # 使用的技术
   
    - beego 1.8.1
    - mysql 5.6
    - editor.md
    - bootstrap 3.2
    - jquery 库
    - layer 弹出层框架
    - webuploader 文件上传框架
    - Nprogress 库
    - jstree 树状结构库
    - font awesome 字体库
    - cropper 图片剪裁库
    - layer 弹出层框架
    - highlight 代码高亮库
    - to-markdown HTML转Markdown库
    - wangEditor 富文本编辑器
   
   
    # 主要功能
   
    - 项目管理,可以对项目进行编辑更改,成员添加等。
    - 文档管理,添加和删除文档等。
    - 评论管理,可以管理文档评论和自己发布的评论。
    - 用户管理,添加和禁用用户,个人资料更改等。
    - 用户权限管理 , 实现用户角色的变更。
    - 项目加密,可以设置项目公开状态,私有项目需要通过Token访问。
    - 站点配置,可开启匿名访问、验证码等。
   
    # 参与开发
   
    我们欢迎您在 MinDoc 项目的 GitHub 上报告 issue 或者 pull request。
   
    如果您还不熟悉GitHub的Fork and Pull开发模式,您可以阅读GitHub的文档(https://help.github.com/articles/using-pull-requests) 获得更多的信息。
   
    # 关于作者
            
回复 支持 反对

使用道具 举报

T***VIP会员 永久VIP | 2022-4-29 19:32:12 | 显示全部楼层

Steam 社区昵称:***查看资料 资料加为 Steam 好友 加好友聊天(须为 Steam 好友) 聊天查看库存 库存查看截图 截图查看好友 好友查看群组 群组查看愿望单 愿望本人推荐 推荐 查看资料 Ta的皮肤

[xmd]>微信公众号排版工具。问题或建议,请公众号留言。**[程序员翻身](#jump_8)**

建议使用 **Chrome** 浏览器,体验最佳效果。

使用微信公众号编辑器有一个十分头疼的问题:粘贴出来的代码,格式错乱,空间小还带行号,而且特别丑。Markdown.com.cn编辑器能够解决这个问题。

Markdown是一种轻量级的「标记语言」。

请阅读下方文本熟悉工具使用方法,本文可直接拷贝到微信中预览。

## 1 Markdown.com.cn 简介

- 支持自定义样式的 Markdown 编辑器
- 支持微信公众号、知乎和稀土掘金
- 点击右上方对应图标,一键复制到各平台

## 2 Markdown语法教程

### 2.1 标题

不同数量的`#`可以完成不同的标题,如下:

# 一级标题

## 二级标题

### 三级标题

### 2.2 字体

粗体、斜体、粗体和斜体,删除线,需要在文字前后加不同的标记符号。如下:

**这个是粗体**

*这个是斜体*

***这个是粗体加斜体***

~这里想用删除线~~

注:如果想给字体换颜色、字体或者居中显示,需要使用内嵌HTML来实现。

### 2.3 无序列表

无序列表的使用,在符号`-`后加空格使用。如下:

- 无序列表 1
- 无序列表 2
- 无序列表 3

如果要控制列表的层级,则需要在符号`-`前使用空格。如下:

- 无序列表 1
- 无序列表 2
  - 无序列表 2.1
  - 无序列表 2.2

**由于微信原因,最多支持到二级列表**。

### 2.4 有序列表

有序列表的使用,在数字及符号`.`后加空格后输入内容,如下:

1. 有序列表 1
2. 有序列表 2
3. 有序列表 3

### 2.5 引用

引用的格式是在符号`>`后面书写文字。如下:

> 读一本好书,就是在和高尚的人谈话。 ——歌德

> 雇用制度对工人不利,但工人根本无力摆脱这个制度。 ——阮一峰

### 2.7 链接

微信公众号仅支持公众号文章链接,即域名为`https://mp.weixin.qq.com/`的合法链接。使用方法如下所示:

对于该论述,欢迎读者查阅之前发过的文章,[你是《未来世界的幸存者》么?](https://mp.weixin.qq.com/s/s5IhxV2ooX3JN_X416nidA)
<a id="jump_8"></a>
### 2.8 图片

插入图片,格式如下:

![这里写图片描述](https://www.nginx.cn/wp-content/uploads/2020/03/qrcode_for_gh_82cf87d482f0_258.jpg)

支持 jpg、png、gif、svg 等图片格式,**其中 svg 文件仅可在微信公众平台中使用**,svg 文件示例如下:

![](https://markdown.com.cn/images/i-am-svg.svg)

支持图片**拖拽和截图粘贴**到编辑器中。

注:支持图片 ***拖拽和截图粘贴*** 到编辑器中,仅支持 https 的图片,图片粘贴到微信时会自动上传微信服务器。

### 2.9 分割线

可以在一行中用三个以上的减号来建立一个分隔线,同时需要在分隔线的上面空一行。如下:

---

### 2.10 表格

可以使用冒号来定义表格的对齐方式,如下:

| 姓名   | 年龄 |     工作 |
| :----- | :--: | -------: |
| 小可爱 |  18  | 吃可爱多 |
| 小小勇敢 |  20  | 爬棵勇敢树 |
| 小小小机智 |  22  | 看一本机智书 |



## 3. 特殊语法

### 3.1 脚注

> 支持平台:微信公众号、知乎。

脚注与链接的区别如下所示:

```markdown
链接:[文字](链接)
脚注:[文字](脚注解释 "脚注名字")
```

有人认为在[大前端时代](https://en.wikipedia.org/wiki/Front-end_web_development "Front-end web development")的背景下,移动端开发(Android、IOS)将逐步退出历史舞台。

[全栈工程师](是指掌握多种技能,并能利用多种技能独立完成产品的人。 "什么是全栈工程师")在业务开发流程中起到了至关重要的作用。

脚注内容请拉到最下面观看。

### 3.2 代码块

> 支持平台:微信代码主题仅支持微信公众号!其他主题无限制。

如果在一个行内需要引用代码,只要用反引号引起来就好,如下:

Use the `printf()` function.

在需要高亮的代码块的前一行及后一行使用三个反引号,同时**第一行反引号后面表示代码块所使用的语言**,如下:

```java
// FileName: HelloWorld.java
public class HelloWorld {
  // Java 入口程序,程序从此入口
  public static void main(String[] args) {
    System.out.println("Hello,World!"); // 向控制台打印一条语句
  }
}
```

支持以下语言种类:

```
bash
clojure,cpp,cs,css
dart,dockerfile, diff
erlang
go,gradle,groovy
haskell
java,javascript,json,julia
kotlin
lisp,lua
makefile,markdown,matlab
objectivec
perl,php,python
r,ruby,rust
scala,shell,sql,swift
tex,typescript
verilog,vhdl
xml
yaml
```

如果想要更换代码高亮样式,可在上方**代码主题**中挑选。

其中**微信代码主题与微信官方一致**,有以下注意事项:

- 带行号且不换行,代码大小与官方一致
- 需要在代码块处标志语言,否则无法高亮
- 粘贴到公众号后,用鼠标点代码块内外一次,完成高亮

diff 不能同时和其他语言的高亮同时显示,且需要调整代码主题为微信代码主题以外的代码主题才能看到 diff 效果,使用效果如下:

```diff
+ 新增项
- 删除项
```

**其他主题不带行号,可自定义是否换行,代码大小与当前编辑器一致**

### 3.3 数学公式

> 支持平台:微信公众号、知乎。

行内公式使用方法,比如这个化学公式:$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$

块公式使用方法如下:

$$H(D_2) = -\left(\frac{2}{4}\log_2 \frac{2}{4} + \frac{2}{4}\log_2 \frac{2}{4}\right) = 1$$

矩阵:

$$
  \begin{pmatrix}
  1 & a_1 & a_1^2 & \cdots & a_1^n \\
  1 & a_2 & a_2^2 & \cdots & a_2^n \\
  \vdots & \vdots & \vdots & \ddots & \vdots \\
  1 & a_m & a_m^2 & \cdots & a_m^n \\
  \end{pmatrix}
$$

公式由于微信不支持,目前的解决方案是转成 svg 放到微信中,无需调整,矢量不失真。

目前测试如果公式量过大,在 Chrome 下会存在粘贴后无响应,但是在 Firefox 中始终能够成功。

### 3.4 TOC

> 支持平台:微信公众号、知乎。

TOC 全称为 Table of Content,列出全部标题。

[TOC]

由于微信只支持到二级列表,本工具仅支持二级标题和三级标题的显示。

### 3.5 注音符号

> 支持平台:微信公众号。

支持注音符号,用法如下:

Markdown Nice 这么好用,简直是{喜大普奔|hē hē hē hē}呀!

### 3.6 横屏滑动幻灯片

> 支持平台:微信公众号。

通过`<![](url),![](url)>`这种语法设置横屏滑动滑动片,具体用法如下:

<![蓝1](https://markdown.com.cn/images/blue.jpg),![绿2](https://markdown.com.cn/images/green.jpg),![红3](https://markdown.com.cn.jpg)>

## 4 其他语法

### 4.1 HTML

支持原生 HTML 语法,请写内联样式,如下:

<span style="display:block;text-align:right;colorrangered;">橙色居右</span>
<span style="display:block;text-align:center;colorrangered;">橙色居中</span>

### 4.2 UML

不支持,推荐使用开源工具`https://draw.io/`制作后再导入图片


## 5 致谢

* 歌词经理 [wechat-fromat](https://github.com/lyricat/wechat-format "灵感来源")
* 颜家大少 [MD2All](http://md.aclickall.com/ "MdA2All")

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则