使用Sublime Text 3進行Markdown 編輯+實時預覽


這種做法可能會對你的磁盤IO造成一小部分性能負擔,但負面影響足以忽略。

另外,由於這種頻率的讀寫會被磁盤緩存接管,不必擔心磁盤壽命的影響。


對於剛安裝好的Sublime Text,我們需要安裝一個軟件包管理器:

同時按下ctrl+`,將會在窗口底部出現一個小控制台:
//圖片
我們把這段話復制並粘貼到控制台的編輯欄里:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
  • 1

耐心等待操作完成,之后關閉並重新打開Sublime Text 3.

安裝我們要用到的插件

按下ctrl+shift+P打開快速菜單,鍵入’pcip’:
這里寫圖片描述
回車,等待數據更新,完成后會主動顯示軟件列表。
在里面輸入以下軟件名稱並回車進行安裝:
Markdown Editing // Markdown編輯和語法高亮支持
Markdown Preview// Markdown導出html預覽支持
auto-save // 可自定義的自動保存功能
耐心等待操作完成,之后關閉並重新打開Sublime Text 3.

前兩個是標准的markdown編輯與預覽工具,第三個是實現實時預覽的關鍵
安裝結束后我們新建一個md文檔試試。

實現實時預覽功能

先說最基本的預覽,我們基於此實現實時預覽

我們使用Markdown Preview插件來打開瀏覽器進行預覽:
按下ctrl+shift+P打開快速菜單,鍵入’mp’
這里寫圖片描述
之后選擇markdown即可打開你的默認瀏覽器來預覽剛才的內容。
一定要記得先在磁盤上保存為一個文件,這樣才能轉化成html。

開掛!實現瀏覽器自動刷新

對於瀏覽器而言,我們讓它自動刷新只需在md文件最下面加入一行:

<meta http-equiv="refresh" content="0.1">
  • 1

0.1負責表示刷新間隔,單位是秒,個人覺得這是一個比較穩妥的設定值。
太快的話我們難以滾動頁面,太慢的話有可能體驗很差。
為了不讓滾動時編輯的新文字觸底,我們在最后一行的刷新代碼之上打好幾個占空間的行即可。
由於空行不會被解析,我們在每一行之前放一個字符#或者打三個以上的減號表示分割線。

最后一步:實現md文檔到html文件的自動更新

這里我們用到了一個叫做auto-save的插件,它可以針對一個文檔實現空閑x秒后自動保存。
我們打開auto-save的默認設置和用戶設置文件:
Preference->Package Settings->Auto-save->打開Settings-Defualt和Settings-User
將Default的內容復制粘貼到User里面,然后修改等待時長:

  "auto_save_delay_in_seconds": 0.15,
  • 1

經過實測,0.15是一個比較能接受的值,不會對磁盤造成頻繁讀寫的影響,延遲也不大。
最后就是打開本文檔的自動保存功能了:
按下ctrl+shift+P打開快速菜單,鍵入’auto’
這里寫圖片描述
選擇到current file only按下回車
狀態欄應該顯示這里寫圖片描述
至此,自動保存將在文檔更改0.15秒后觸發一次,停止自動保存就將上述步驟再做一次即可。


現在我們就能夠開雙側窗口一邊編輯一邊預覽了~
這里寫圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM