image

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

请求帮助请求
781
独孤忆故人
独孤忆故人

23463

本文版权遵循 CC BY-NC 协议 和 本站版权政策

11 条回复

鲲
鲲

9484

#1
发布于 (编辑于 )

Markdown 语法

md
| 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有空我也去完善一下表格效果，还有 # 符号加标题文字大小的按钮

独孤忆故人
独孤忆故人

23463

#2
发布于 (编辑于 )
1 2 3 4

评论

Ashiroid
Ashiroid评论独孤忆故人

你复制了一遍代码块？

独孤忆故人
独孤忆故人回复Ashiroid

难顶，不会搞，在研究

Ashiroid
Ashiroid回复独孤忆故人

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

Ashiroid
Ashiroid回复Ashiroid

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

Ashiroid
Ashiroid

548

#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

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

Ashiroid
Ashiroid

548

#4
发布于 (编辑于 )

@Ashiroid #3

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

Snipaste\_2025-03-31\_23-10-07.png以及代码块内容（本站）会丢失分行？（/n），代码编辑区鼠标点击有时无法移动光标

独孤忆故人
独孤忆故人

23463

#5
发布于

@Ashiroid #3

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

独孤忆故人-1743434180676-QQ20250331231613jpg

独孤忆故人
独孤忆故人

23463

#6
发布于

@Ashiroid #4

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

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

独孤忆故人-1743434504725-QQ20250331232125jpg

Ashiroid
Ashiroid

548

#7
发布于 (编辑于 )

@独孤忆故人 #6

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

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


代码如下

| 项目 | 价格 | 数量 |

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

| 计算机 | $1600 | 5 |

| 手机 | $12 | 12 |

| 管线 | $1 | 234 |

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

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

独孤忆故人
独孤忆故人

23463

#8
发布于

评论

Ashiroid
Ashiroid评论独孤忆故人

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

Ashiroid
Ashiroid回复Ashiroid

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

Ashiroid
Ashiroid

548

#9
发布于

@独孤忆故人 #6

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

Ashiroid-1743435323425-Snipaste20250331233255png

独孤忆故人
独孤忆故人

23463

#10
发布于 (编辑于 )
Ashiroid
Ashiroid

548

#11
发布于 (编辑于 )

@独孤忆故人 #10

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

(｡>︿<｡) 已经一滴回复都不剩了哦~