业余草微信公众号Markdown编辑器, 适合代码排版

  1. 云栖社区>
  2. 博客>
  3. 正文

业余草微信公众号Markdown编辑器, 适合代码排版

业余草 2018-04-05 11:58:54 浏览798
展开阅读全文
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xmt1139057136/article/details/79825204

随着大家都转战微信公众平台,如何快速的编写文章就摆在了首要位置。不可否认,使用微信自带的编辑器可以做出好看的排版,甚至用第三方编辑器有更多的模板。但是,这些全部都需要手动的调整。本来公众平台就算是自媒体,非全职的自媒体哪有那么多时间和精力去搞排版。那么,寻找一种简单的排版方式也势在必得。

markdwon自然是首选,然而微信公众平台并没有提供翻译模板,只能自己寻找了。市场上的模板很多,我们可以找一款自己合适的,复制渲染后的html到微信公众平台。我寻找了好久,发现关注的几个大佬都采用一种样式,果然,都是采用的一个开源的markdwon编辑器,为开源点赞。我fork了一个版本,修改了本地开发模式,更适合小白入手。更改了标题样式。最终结果如下: https://md.rmiao.top/

微信公众号格式化工具

使用微信公众号编辑器有一个十分头疼的问题——粘贴出来的代码,格式错乱,而且特别丑。这块编辑器能够解决这个问题。

用法

  • 复制你的markdown
  • 粘贴到这里
  • 点击预览
  • 选择样式
  • 复制到微信公众号编辑页面

代码示例


  1. var OnlineMarkdown = {
  2. init: function() {
  3. var self = this;
  4. self.load().then(function() {
  5. self.start()
  6. }).fail(function(){
  7. self.start();
  8. });
  9. },
  10. start: function() {
  11. this.updateOutput();
  12. },
  13. load: function() {
  14. return $.ajax({
  15. type: 'GET',
  16. url: params.path || './d.md',
  17. dateType: 'text',
  18. timeout: 2000
  19. }).then(function(data) {
  20. $('#input').val(data);
  21. });
  22. },
  23. updateOutput: function () {
  24. var val = this.converter.makeHtml($('#input').val());
  25. $('#output .wrapper').html(val);
  26. PR.prettyPrint();
  27. }
  28. };
  29. OnlineMarkdown.init();

上面是 JavaScript,下面是 php


  1. echo 'hello,world'

表格示例

品类 个数 备注
苹果 1 nice
橘子 2 job

以上是用的比较多的,还装了几十个使用频度比较低的插件,主要包括 Snippet 和文件高亮配置,可以在这里查看:https://gist.github.com/barretlee/a5170eb6ca1805f66687063d2e3a4983,你也可以通过 SettingsSync 将这个配置下载下来,id 就是后面半截: a5170eb6ca1805f66687063d2e3a4983

在命令行打开 VSC

在安装好 VSC 后,直接配置 .bash_profile 或者 .zshrc 文件:


  1. alias vsc='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code';
  2. VSC_BIN='/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin';
  3. PATH=$VSC_BIN:$PATH;
  4. export PATH;

然后让配置生效,在控制台执行:


  1. # 如果没有安装 zsh,可能是 ~/.bash_profile
  2. source ~/.zshrc

这个时候就可以在全局打开了:


  1. # -a 的意思是不要新开窗口,在当前已经打开的 vsc 中打开文件
  2. vsc path/to/file.ext -a

有同学提到,VSC 的面板上搜索 install 就可以在命令行安装 code 这个命令了,不过我更喜欢使用 vsc来打开文件,这也算是折腾吧


网友评论

登录后评论
0/500
评论
业余草
+ 关注