youbbs
youbbs
3785 6 0

youbbs试试markdown

因为之前论坛最常发布的内容很简单,自动格式化的需求也很简单

  • 自动把图片地址转为 img 标签
  • 自动把链接地址转为可点的 a 标签
  • 代码块

markdown 格式一直没想去实现,其实是懒得去弄 css 适配,就拖到现在,先在官网添加markdown格式支持,

使用的库 https://github.com/shurcooL/github_flavored_markdown ,该库支持 GitHub Flavored Markdown。

这里主要做的改进是

  • 兼容以前格式
  • 图片识别
  • 链接点击计数

markdown 的基本使用

标题

在想要设置为标题的文字前面加#来表示,如

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

#后跟个空格再写文字,一般页面的 h1 是给帖子标题,所以内容就不要再添加。

字体格式

常用下面几种

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

效果

  • 这是加粗的文字
  • 这是倾斜的文字`
  • 这是斜体加粗的文字
  • 这是加删除线的文字

引用

在引用的文字前加 > 即可。引用也可以嵌套,如加两个 >> 、三个 、>>>、n个...

>这是引用的内容
>>这是引用的内容
>>>>>>>这是引用的内容

效果

这是引用的内容

这是引用的内容

这是引用的内容

分割线

三个或者三个以上的 - 或者 * 都可以。

---
--------
***
********

效果都一样,都是一条线





图片

![图片alt](图片地址 ''图片title'')

图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

链接

[超链接名](超链接地址 "超链接title")
title可加可不加

列表

无序列表

写法

- 列表内容
+ 列表内容
* 列表内容
- 列表内容
+ 列表内容
* 列表内容
* 列表内容

注意:- + * 跟内容之间都要有一个空格

效果

  • 列表内容
  • 列表内容
  • 列表内容
  • 列表内容
  • 列表内容
  • 列表内容
  • 列表内容

有序列表

直接用数字

写法

1. 列表内容1
2. 列表内容2
3. 列表内容3

注意:序号跟内容之间要有空格

效果

  1. 列表内容1
  2. 列表内容2
  3. 列表内容3

列表嵌套

子列表前面敲一个以上空格即可,为了明显一般用两个或三个空格

1. 列表内容1
- 1 a
- 1 b
2. 列表内容2
1. 2 a
2. 2b
3. 列表内容3
- 3 a
- 3 b
4. 列表内容4
5. 列表内容5
  1. 列表内容1
  • 1 a
  • 1 b
  1. 列表内容2
  2. 2 a
  3. 2b
  4. 列表内容3
  • 3 a
  • 3 b
  1. 列表内容4
  2. 列表内容5

表格

写法

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容
内容|内容|内容
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
- 有一个就行,为了对齐,多加了几个
文字默认居左
-两边加:表示文字居中
-右边加:表示文字居右
注:原生的语法两边都要用 | 包起来。此处省略
表头 表头表头表头 表头表头表头
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容
内容 内容 内容

代码

单行代码

代码之间分别用一个反引号 ` 包起来

`单行代码内容`

代码块

代码之间分别用三个反引号 ```包起来,且两边的反引号单独占一行,也可以在第一个反单引号添加代码的语言,一般不加,代码高亮会自动识别。

``` python

print('hello')

```

Task List

- [x] a1
- [ ] a2
- [ ] a3
- [ ] a3 - 1
- [ ] a3 - 2
- [ ] b1
  • a1
  • a2
  • a3
  • a3 - 1
  • a3 - 2
  • b1

重要提示

由于一经发表就不能更改,善于使用 预览 功能

0

See Also

Nearby


Discussion (6)

qq1
qq1 2020-01-10 02:44

好像开源版本目前还没有这个功能,预计什么时候会放出来吗?
还有github登陆会放出来吗?

0
恶魔奶爸英语
恶魔奶爸英语 2020-01-11 04:33

我觉得gopher的编辑器界面挺友好(用的是tui.editor)

开源地址 https://github.com/jimmykuu/gopher
demo https://www.golangtc.com/

0
youbbs
youbbs 2020-01-11 10:50

@恶魔奶爸英语 tui.editor 不错

0
冒烟的蘑菇
冒烟的蘑菇 2020-02-22 02:37

的确开源版本还没有此功能~~~啥时候放出来?

  • 我也试试
  • 真有呢?
0
qq48
qq48 2020-03-15 13:37

开源的啥时候出来呢?

0
youbbs
youbbs 2020-03-16 02:47

@qq48 #5 开源版已添加 md 支持

0
Login Topics