教你一招-如何在百家号中使用代码块

2022-09-23 本文已影响0人思跃喵

发现问题

当一名程序员在百家号中发表文章时，最大的问题莫过于文章编辑器中没有没有代码块选项，对程序员来说功能直接减半

如图，左翻右翻都找不到代码块这一个选项。

从表面来看，百家号的编辑器无疑是一个富文本框，理论上来说是可以识别HTML的，但不能直接键入HTML，如下：

预料之中，必然不会让你直接键入HTML代码，不然无法保证安全性

那么，如果从其他网页复制的HTML内容呢，网页上选择之后右键复制，其实是带上了样式信息的

从其他的markdown编辑器中复制出来不就行了吗，于是我分别用 csdn 和简书进行了测试，得到如下结果：

原始代码：

简书复制后：

简书复制区域：从代码块的下一行第一个字符之前，到代码块上一行的最后一个字符之后，否则有可能丢失代码高亮样式

CSDN复制效果：

复制区域与简书的复制区域基本一直，效果也基本一致，唯一的差别就是，CSDN的TAB基本识别为8个空格，而简书一般是4个空格

基本上左右滑动也能复制过来

问题基本上得到解决

接下来又出现了新的问题

两个markdown复制过来的样式，基本上都丢失了代码的格式化信息，要不就是丢失了提行，要么就是tab的位置不对

同时，在发布之后发现，所有的代码都被挤在了同一行，如下图：

9860cdb67153bd35754e9b12e0f43586.png

于是，我对每一个代码提行都进行重新删除再敲回车后，并且对缩进重新敲Tab后，得到了如下结果

猜测应该是粘贴的时候所有的提行与tab都被识别成了空格，而多个空格在最终渲染的时候被识别为同一行

想要最终正常显示，只能删除提行重新回车，然后重新tab进行缩进

经过我的多次试验，想要在百家号中展示代码块，有以下几个要点

找到一个合适的markdown编辑器（CSDN和简书之外的编辑器我还没试过），以及你喜欢的代码块样式，最好这个代码块支持左右横滑
复制的时候一定注意，从代码块的下一行第一个字符之前，到代码块上一行的最后一个字符之后，否则有可能丢失代码高亮样式，我试验的前几次都是因为复制的位置不对，导致样式错误
复制过来的缩进与提行几乎全部丢失，目前只能删除提行，重新回车，再重新调整缩进样式

理论上来说，以上问题只要找到二三两个点在百家号编辑器中的区别，应该是能用代码去解决的。

如果大家感兴趣的话，关注我，后续我将继续研究探讨这个问题。