BYR Achieve · 镜像论坛

# 由来 6月6号在写markdown的时候，突然想着，论坛为何不能支持一波markdown呢？于是就配合@wdjwxh后端的支持，把论坛一个很简单的markdown的web版支持的方案做出来了。 ## 用法在论坛的回复或者文章输入框内输入：`[md][/md]`，然后就可以在标签内书写你熟悉的markdown了。为了方便大家使用，原本的编辑框处增加了一个`M`标记的按钮，这个按钮就是快速插入`[md][/md]`标签对的按钮。并支持两种用法： - 支持在输入框内光标处直接插入标签对 - 支持选中文本后在所选文本的基础上包上标签对另外，web版支持回复预览，邮件预览，在编辑文章后，点击下方预览按钮也支持markdown预览~ ### 示例 ```markdown [md] # 一级标题 ## 二级标题 ### 三级标题 ... https://static.byr.cn/img/logo.gif [普通链接](https://bbs.byr.cn) - 列表1 - 列表2 - 列表3 等等~ [/md] ``` https://bbs.byr.cn/att/Progress/0/275/7212 ## 北邮人论坛Markdown风格论坛采用的是与github的[GFM](https://help.github.com/categories/writing-on-github/)(Github Flavored Markdown)相近的方案。 ### 标题支持1-6级标题，用若干#号来表示。注意#号和标题之间需要有一个空格。 #### 示例 ```markdown # 一级标题 ## 二级标题 ### 三级标题 ...等等 ``` https://bbs.byr.cn/att/Progress/0/275/26652 ### 换行标准MD要在一行的最后加两个空格符才表示换行，否则是不换行的。但是GFM则没有此要求。 #### 示例 ``` 第一行（最后无两个空格）第二行 ``` 第一行（最后无两个空格）第二行 ### 自动URL链接如果在`[md][/md]`标签块中书写一个URL的连接文本，将会自动生成URL。比如：https://bbs.byr.cn ### 列表支持有序列表和无序列表两种。注意列表前的标号和内容之间有一个空格。并且注意两段列表之间需要用其他格式分隔开来。比如下例采用分割线分隔，否则不能解析。另外尤其注意，列表与其之后非列表的内容之间需要两个换行才能正常解析。 #### 示例 ```markdown 1. 有序列表1 2. 有序列表2 3. 有序列表3 --- - 无序列表1 - 无序列表2 - 无序列表3 ``` https://bbs.byr.cn/att/Progress/0/275/43540 ### 任务列表支持把列表变成带勾选框的任务列表，只需要修改列表前序号的格式为`- [ ]`或者`- [x]`。 **注意**：`[ ]`中有个空格。并且目前只支持`- [ ]`或者`- [x]`这两种格式书写。同样，任务列表与其之后非列表的内容之间需要两个换行才能正常解析。 #### 示例 ```markdown - [ ] Task1 - [ ] Task2 - [x] Task3 ``` - [ ] Task1 - [ ] Task2 - [x] Task3 ### 表格支持表格的写法，不过需要注意，表格必须要有表头，如果表头没有内容就把内容空着就行。另外注意，表格之前的内容和表格之间需要两个换行才能正常解析。 #### 示例 ``` |表格|表头|表头| |---|---|---| |论坛|支持|markdown了| |终于|也支持|表格了| |表格的写法|就是这样的|行数和列数没有限制| ``` |表格|表头|表头| |---|---|---| |论坛|支持|markdown了| |终于|也支持|表格了| |表格的写法|就是这样的|行数和列数没有限制| ### 代码块支持用一对` ``` `将代码块包起来进行代码块输出，并支持语法高亮。 #### 语法高亮支持的语言 ||||||| |---|---|---|---|---|---| |Apache|Bash|C#|C\C++|CoffeeScript|Diff| |HTML\XML|HTTP|Ini|JSON|JAVA|JavaScript| |MakeFile|Markdown|Nginx|Object-C|PHP|Perl| |Python|Ruby|SQL|Go|CSS\LESS|SCSS| 所以今后大家要贴代码就可以不再用之前的`[code][/code]`标签来写东西啦，可以直接用markdown的语法来贴代码了。 #### 示例 ```JavaScript var a = "Hello,BYR!"; function helloByr(){ console.log(a); } ``` ```JavaScript var a = "Hello,BYR!"; function helloByr(){ console.log(a); } ``` 是不是好看了不少呢？ ### 文本链接和图片展示支持用Markdown特定的语法来实现文本链接和图片展示。文本链接采用格式`[]()`,图片链接采用格式`` #### 示例 ``` [北邮人论坛](https://bbs.byr.cn) https://static.byr.cn/img/logo.gif ``` [北邮人论坛](https://bbs.byr.cn) https://static.byr.cn/img/logo.gif ### 引用支持引用的语法。采用`> XXXXX`的写法，内容和`>`之间有个空格。 #### 示例 ``` > 这里是引用 ``` > 这里是引用 ### 更多语法剩下还有一些语法没有列出来，如果你对markdown不熟悉，可以参考本文下面给出的markdown语言简要介绍。 ### 暂不支持的东西 - [ ] latex公式 - [ ] 流程图 - [ ] 序列图 - [ ] 脚注 - [ ] TOC ------ ## 注意事项在`[md][/md]`标签中不能书写以往在论坛里嵌入的标签块，例如表情块`[em*][ema*]`等等，不能加入上传的图片、文件的`upload`标签块等等。因为在`[md][/md]`标签块中他们都不会被解析。因此如果你既想要顺滑地写markdown又想用上论坛以前的文本功能的话，目前的解决方案是在需要用markdown的地方在`[md][/md]`标签内书写，这样的话`[md][/md]`块只会解析成markdown格式的文本。在标签外，可以用以前的正常写法，这部分会跟以前的解析方式一样，进行相应的解析。另外，在论坛的文本输入框内`[md][/md]`标签的数量没有限制。不过需要注意的是，如果你在`[md][/md]`标签块内继续嵌套`[md][/md]`标签对的话一定注意标签对要闭合。否则将会渲染出错误的样式。书写markdown的时候，如果发现有时候格式跟预期的不一样，很可能就是内容之间换行的时候少换了一行，在有问题的内容前再换一行试试~ **重要**：目前markdown文章效果只支持北邮人论坛web网页版（手机web版也暂时不支持）；手机客户端目前不支持，应该是会输出markdwon的原始代码。所以你在手机客户端上是看不到样式的。不过markdown文章的源码的相对来说已经比较工整。所以要看效果的话可以到web端查看。预计后续客户端和手机web版将会进行支持。 ## Markdwon语言简要介绍如果你之前没有接触过markdown，可以参考如下的指引，但是要注意论坛的markdown实现方案里不一定能够实现如下教程里全部功能。 - github的[GFM指引](https://help.github.com/categories/writing-on-github/) - 简书上的[markdown教程](http://www.jianshu.com/p/21d355525bdf) - 作业部落[markdown教程](https://www.zybuluo.com/mdeditor) ## 推荐工具 > 只是个人推荐的markdown书写工具，有更好的可以提出来，请轻拍~ ### Windows 平台 - MarkdownPad - MarkPad - Atom - Sublime ### Linux 平台 - ReText - Sublime - Atom ### Mac 平台 - Mou - Atom ### 网页版 - [StackEdit](https://stackedit.io/) - [作业部落](https://www.zybuluo.com/mdeditor) - [马克飞象](https://maxiang.io/) 推荐大家在工具里写完markdown再搬运到论坛上，毕竟论坛的编辑器实在是功能比较少。 ## 开发相关如果你对论坛如何实现markdown感兴趣可以看看这部分。简要说说。这里需要在此感谢@wdjwxh的后端的部分的支持，更新了对`[md][/md]`标签的支持，并且在比较复杂的标签对嵌套、同级识别上花了很多功夫。使之能够将md标签块的内容在提交给后端后，解析并返回到前端。而我做的前端部分的工作，真真基本上就是github的搬运工了。前端主要做的部分是解析返回的内容。采用的markdown解析器是[marked.js](https://github.com/chjj/marked)，代码高亮的解析器是[highlight.js](https://highlightjs.org/)，采用的配色方案是github的[markdown风格](https://gist.github.com/andyferra/2554919)+highlight的[github.css](https://github.com/isagalaev/highlight.js/blob/master/src/styles/github.css)。简单来说，后端返回前端的时候，会将原有`[md]内容[/md]`标签及其内部内容替换成`<pre class="markdown">内容<pre>`，然后先用`marked.js`对传到前端来的这类标签块进行解析，然后将其转成`<div class="markdown">markdown内容<div>`，于是内部如果有代码块的部分，就可以用`highlight.js`来进行格式解析，最后配合上相应样式就能实现markdown内容输出了。当然在渲染和样式的细节上还是有相应的修改，并最大程度上做到了和github的风格一致。虽然是前端客户端渲染的方案，但是渲染起来速度还是很快的。因此吐槽性能问题的朋友们就稍安勿躁啦哈哈。这个前端解决方案已经开源，使用起来很简单，你也可以给自己的网站加上markdown的支持啦哈哈。开源地址：[bbs-markdown](https://github.com/Molunerfinn/bbs-markdown)，注意，目前暂时还是需要配合jquery才能使用。如果大家对论坛的markdown功能有什么提议或者有什么bug欢迎私信我~ ------ **最后，enjoy~**

论坛支持markdown啦，戳进来看看怎么用吧~