業餘草微信公眾號Markdown編輯器, 適合程式碼排版

業餘草發表於2018-04-05

隨著大家都轉戰微信公眾平臺，如何快速的編寫文章就擺在了首要位置。不可否認，使用微信自帶的編輯器可以做出好看的排版，甚至用第三方編輯器有更多的模板。但是，這些全部都需要手動的調整。本來公眾平臺就算是自媒體，非全職的自媒體哪有那麼多時間和精力去搞排版。那麼，尋找一種簡單的排版方式也勢在必得。

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. };
  30. OnlineMarkdown.init();
上面是 JavaScript，下面是 php：
  1. echo 'hello,world'
表格示例
品類個數備註
蘋果1nice
橘子2job
以上是用的比較多的，還裝了幾十個使用頻度比較低的外掛，主要包括 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來開啟檔案，這也算是折騰吧

 




相關文章