该贴中类似表格的效果是如何实现的呢

请求帮助请求
浏览数 - 194发布于 - 2025-03-31 - 14:25
鲲

5200

#1

Markdown 语法

| Feature      | Description                                          | Example                   |
| ------------ | ---------------------------------------------------- | ------------------------- |
| 🎨 Theme     | Create your own theme with CSS                       | Nord, Dracula             |
| 🧩 Plugin    | Create your own plugin to extend the editor          | Search, Collab            |
| 📦 Component | Create your own component to build your own editor   | Slash Menu, Toolbar       |
| 📚 Syntax    | Create your own syntax to extend the markdown parser | Image with Caption, LaTex |
Feature Description Example
🎨 Theme Create your own theme with CSS Nord, Dracula
🧩 Plugin Create your own plugin to extend the editor Search, Collab
📦 Component Create your own component to build your own editor Slash Menu, Toolbar
📚 Syntax Create your own syntax to extend the markdown parser Image with Caption, LaTex

image.png有空我也去完善一下表格效果,还有 # 符号加标题文字大小的按钮

2025-03-31 - 14:28 (已编辑于 2025-03-31 - 14:29)
#2
1 2 3 4
2025-03-31 - 14:48 (已编辑于 2025-03-31 - 16:49)

评论

Ashiroid
Ashiroid评论独孤忆故人

你复制了一遍代码块?

独孤忆故人
独孤忆故人评论Ashiroid

难顶,不会搞,在研究

Ashiroid
Ashiroid评论独孤忆故人

代码块是markdown中被 ``` (code) ``` 包围的脚本,是不会渲染成表格的,你复制的这部分在编辑区中可能保留了代码属性,不会自动渲染。把这些贴到代码区应该就行了

Ashiroid
Ashiroid评论Ashiroid

好吧我试了下需要手动分行……

#3

markdown中的表格支持多种嵌套,除了需要换行的其他语法和表格本身以外基本都支持

Head colomn 1 colomn 2
Sticker A table /\
here is a link space? ||
italic bold strike ||
code background color not rendered
|Head| colomn 1| colomn 2|

|--|--|--|

||![Sticker](https://sticker.kungal.com/stickers/KUNgal1/6.webp "Sticker") |A table|/\\||

|[here is a link](kungal.com)|space?||\|\|||

|*italic*|**bold**|~~strike~~|\|\|||

|`code`|||background color not rendered||

然而手动编写表格的时候有时候并不会触发自动补全,如上所示,是否可以考虑一下在发布时触发自动转换?

2025-03-31 - 15:05 (已编辑于 2025-03-31 - 16:18)
#4

此前所说的标题行并不会缺失渲染,但是溢出列会被直接移除,实际效果与编辑器内界面不符?

Snipaste_2025-03-31_23-10-07.png以及代码块内容(本站)会丢失分行?(/n),代码编辑区鼠标点击有时无法移动光标

2025-03-31 - 15:14 (已编辑于 2025-03-31 - 15:18)
#5

老哥问一下我参考了csdn的一串代码,为什么效果不一样呢 代码如下

独孤忆故人-1743434180676-QQ20250331231613jpg

2025-03-31 - 15:17
#6

这帖子里的代码和效果是不是对不上啊,-:不应该是右对齐嘛,他给的效果却是左对齐

而且为什么数据之间的隔断也做不出来呢

独孤忆故人-1743434504725-QQ20250331232125jpg

2025-03-31 - 15:21
#7

本站不写默认是左对齐,要居中的话写:--:就行了

项目 价格 数量
计算机 $1600 5
手机 $12 12
管线 $1 234


代码如下

| 项目 | 价格 | 数量 |

| :-: | ----- | :-: |

| 计算机 | $1600 | 5 |

| 手机 | $12 | 12 |

| 管线 | $1 | 234 |

还有你CSDN效果图上--:就是左对齐啊

不同的markdown编辑器效果稍微有些不同,有的还可以内嵌html代码,-[ ]用作勾选清单,取决于具体项目吧😂

2025-03-31 - 15:25 (已编辑于 2025-03-31 - 15:28)
#8

---: 不是右对齐吗?

2025-03-31 - 15:30

评论

Ashiroid
Ashiroid评论独孤忆故人

あ、あ……啊?当我没说,这是代码写错不一致了吧

Ashiroid
Ashiroid评论Ashiroid

我刚才大概是睡糊涂了,看图写话去了

#9

哦对了,还有隔断,这个单纯就是本站风格不同,隐藏了隔断线,你打开开发者模式用光标工具还是可以看到表格单元格,只是不显示

Ashiroid-1743435323425-Snipaste20250331233255png

2025-03-31 - 15:35
#10

明白了,会用了Sticker

2025-03-31 - 15:39 (已编辑于 2025-03-31 - 15:40)
#11

OK,我去github提issue去了,不知道本站站长还有没有精力改改这个编辑器

2025-03-31 - 15:45 (已编辑于 2025-03-31 - 16:43)
kohaku