如何优雅的在微信公众号中编辑代码

    自从入坑公众号以来，被公众号的这个编辑器简直折磨死了。我发的文章基本上是少不了贴代码的，可是每次贴上去的代码总是被公众号的编辑器无厘头的给我过滤掉换行符，简直气死人。

    例如我编辑得好好的代码，

    贴上去就成了这样：

    每次一段代码一段代码的敲回车，简直敲到手抽筋。醉了。

    这还不算，这个格式的代码发到手机上，还不能水平滚动，各种任性的折行，让本来清秀的代码看起来真是一坨一坨的。

    查了一下，不少同行都在因为这个而感到苦恼，大家分析得出的结论是微信公众号的编辑器会对我们贴上去的内容进行处理，而处理的过程中又会对一些换行符进行过滤，导致本来排好的代码乱成一团。

    对于这种情况，最直接的方法自然是用工具渲染好，然后截图贴到公众号的编辑器里面。也可以写一个工具把代码自动绘成图片。

    • 优点：简单直接，在找到更好的办法之前，我之前的几篇文章都是这么处理的。

    很多朋友都提到 Markdown Here，这是一个非常棒的 Chrome 插件，大家可以搜索并添加它，安装之后可以在 Options 当中选择自己喜欢的主题，之后只要在选中编辑框，贴入 Markdown 源码，再点击插件的按钮即可。

    不过。。这个插件同样不能幸免于换行符的过滤，如果我们在微信公众号编辑器当中贴入 md 源码，按照上述操作渲染出漂亮的格式，保存之后预览，你就会发现这个办法其实并不怎么好用，或者说基本上不能用。

    • 优点：这插件真的很棒。
    • 缺点：因为渲染后的格式还是会惨遭微信公众号的编辑器的毒手，也就是说，你得自己手动处理一下换行的问题。

    我们前面说，可以先把 md 源码渲染好，然后直接复制粘贴到公众号的编辑器当中，结果其实与 Markdown Here 的效果完全一样。说到底是换行符被过滤的问题。

    我一直用的 md 工具是 MacDown，可以直接先用它编辑好文章，然后复制渲染结果贴到微信公众号当中，自行处理一下换行的问题即可。

    • 优点：本地编辑，方便快捷。
    • 缺点：一样，还是换行符的问题。

    当你在搜索引擎里面搜索这个问题的时候，大多数回答可能是推荐你用一些第三方的编辑器，比如 什么 135 编辑器之类的，这些编辑器对于不写代码的朋友来说，真的挺好用的，里面提供了各式各样的模板，大家只要把文字准备好，一套用就立马狂拽酷炫吊炸天。

    可是，它们并不是为我们这些码农准备的啊，你想想公众号绝大多数的运营者都是编辑，而不是程序员，他们根本不需要关心什么是代码，更不需要关心怎么把代码排版好（我相信微信公众号编辑器的开发小伙伴大概也是这么想的吧，这么久了这编辑器还是这鬼样子）。

    第三方编辑器很多，不过，当你一个一个去试的时候，你会发现这条路根本不通！！

    • 优点：适合编辑各种花哨的文字和图片。
    • 缺点：不支持代码的格式。

    说实在的这个方案没有很高端。我们的痛点其实就是想个办法不让微信公众号编辑器对贴到里面的代码进行换行符的过滤。

    有朋友提出把渲染后的结果每行都用
    替换 \n，这样过滤时，换行自然就不会被干掉了。

    1.  Person person = new Person("benny", 27); 
    2.  System.out.println(person.getName() + " is " + person.age); //benny is 27 
    3.  person.setName("andy");<br>person.age = 26; 
    4.  System.out.println(person.getName() + " is " + person.age); //andy is 26

    <br> 被直接显示出来了。根本不能用来换行。所以直接从结果入手好像没那么简单。那怎么办，我们干脆修改渲染方式吗？针对每行，用 标签包起来不就可以换行了吗？

    想法挺好啊。想到这里我就开始准备去修改 Markdown Here 的源码了。。。可，尼玛，我不是搞前端的，一片一片的 js 代码我该修改哪里呢？这下可尴尬了。

    此路通，可能成本还是有点儿高了。于是我又回到原点，思考如何欺骗微信公众号编辑器那个换行符不能被过滤的问题。怎么骗呢？关键是，公众号的编辑器通过识别怎样的 pattern 来过滤换行符呢？如果我找到这个 pattern，然后把它破坏掉，不就可以了么？

    经过一番尝试发现：

    • 每一行代码的前后各加一个空格，那么正常有内容的行末换行符就不会被过滤

    于是我动手写了一个简单的 python 脚本，那么后续我只要用 MacDown 编辑好我的文章，再用下面这个脚本自动为所有的代码加上空格、替换空行，那么我再把渲染好的文章贴到公众号的话，大功就告成了。

    附上非常简单的脚本代码：

    CODE_PATTERN_END = r”^\s```\s$” if len(sys.argv) < 2: print “参数不正确.” exit() 　 inputFile = open(sys.argv[1]) output = [] while True: line = inputFile.readline() if line: if re.match(CODE_PATTERN_START, line): output.append(line) while True: line = inputFile.readline() if re.match(CODE_PATTERN_END, line): output.append(line) break if line.strip(): 

    1.                  # 代码行前后各加一个空格 
    2.                  line = " " + line 
    3.                  line = line.replace("\n", " \n") 
    4.                  print line 
    5.              else: 
    7.                  # 替换空行，下面的空格中有一个是中文空格 
    8.                  line = " 　 \n" 
    9.              output.append(line) 
    10.      else: 
    11.          output.append(line) 
    12.      break

    inputFile.close() 　 outputFile = open(sys.argv[1], ‘w+’) outputFile.writelines(output) outputFile.close() ```