如何用Markdown輕松排版知乎專欄文章?

免費、便捷、高效的知乎專欄Markdown排版技巧。希望讀過本文,可以讓你的寫作過程也變得更愉悅。

img_80179324edd41d4cf12a9b8de69c2f28.png

痛點

從前,寫作時的排版是件辛苦事。不論你把排版環節放在寫作中還是寫作后,總會在心里清楚意識到,還有這么一個繁重而無趣的工作在等著你。

后來,有了Markdown,排版就變成了一件令人愉悅的事情了。你只需要用非常簡單的記號說明一些特殊位置,例如標題、列表、腳注和圖片等,然后應用不同的樣式,你寫好的文字就能自動轉化為各種漂亮的排版效果了。

讀者看著舒服,作者寫得高興。Markdown這東西,真的影響了世界。

然而……

不是每一個寫作平臺,都支持Markdown。

這話應該倒過來說——目前主流的寫作平臺里,支持Markdown的還不是很多。

我孤陋寡聞,用過的寫作平臺,僅有簡書、新生大學和Matrix支持Markdown格式排版。所以用起來很舒服。

但是我們無法因此拒絕其他寫作平臺。畢竟辛辛苦苦寫了文章,總希望更多人都能看到。那些平臺往往給你一個類似簡化了的Word的編輯界面。你可以加粗字體、設置列表、插圖制表,但是平臺期待你手動完成上述工作。

我曾經圍繞著如何用Markdown排版微信公眾號的問題,寫了好幾篇文章。有的文章寫了將近一年,還有新讀者在點贊。

這讓我很慚愧。因為近一年以來,我自己的Markdown寫作和排版流程都發生了變化。現在你可以利用免費的編輯器搭建更為舒適的寫作環境,安裝插件更方便地上傳圖片到圖床,同時應用更好的樣式讓讀者在移動設備上讀得更愉快

關于如何用Markdown排版微信公眾號的文章,已經太多了。今天我們換一個話題,聊聊如何用Markdown排版知乎專欄文章。其實,本文的操作流程對微信公眾號、今日頭條等其他寫作平臺都是通用的。

最近我在知乎專欄發布了一些文章。比起其他寫作平臺,知乎的讀者似乎更喜歡在留言中與作者互動。尤其是追問式地拓展討論、探求真知。這給了作者(也就是我)很大鼓舞。在此,我把Markdown排版知乎專欄的技巧發布出來,希望幫助更多的作者收獲這種創作和交流的喜悅。

工欲善其事,必先利其器。讓我們從編輯器講起吧。

編輯器

這里給大家推薦的編輯器,叫做Atom。

這款編輯器最初的用戶,大部分都是Geek和程序員。因為它的生態系統過于強大,所以就如同Emacs一樣,簡直就是“偽裝成編輯器的操作系統”。

普通人寫篇文章,原本是根本用不上這種大殺器的。

但是誰叫Ulysses改成訂閱式了呢?

Atom,至少在目前,還是開源免費的。

請到這個地址下載Atom編輯器。網站會根據你的操作系統,自動找到對應的版本供你下載。

img_61fa078938f883bcc9b1673018aa68fa.jpe

因為我用的是macOS,所以這里網站提供的是蘋果版本Atom。

下載之后,安裝運行。然后你需要安裝2個插件。

第一個插件是幫你預覽Markdown用的,它叫做markdown-preview-enhanced。Markdown里,有圖片、表格和網頁鏈接,如果沒有預覽功能,那你就得面對許多代碼一樣的東西。對于非技術類寫作者來說,可能就會覺得不舒服了。

Atom編輯器安裝插件的方法很簡單。

使用Cmd + ,呼叫配置菜單。注意我這里說的是蘋果系統macOS上的操作。如果你用的是Windows,請把所有出現的Cmd按鍵替換為Ctrl按鍵,或者查閱幫助文檔。下同。

img_d43e3afcf5ee987dd3c9dfe760e54afa.jpe

選擇左側邊欄的最后一項,那個+號,用于安裝新的插件。

img_1a595f982d73cb17417fe7a850fdde55.jpe

在搜索框中輸入該插件的名字:markdown-preview-enhanced

點擊搜索結果中該插件的Install按鈕。

很快,插件安裝好了。

img_53ac6672ae90605586d13f3af0228992.jpe

點擊上圖中出現的Settings。你會看到這個插件的一些選項。

img_f7e99dccbaa6c8ee224226a5eb119219.jpe

下拉滑動條到中間左右的位置,你會看到一個叫做Image Uploader的選項。請點擊右側的上下箭頭按鈕,選擇sm.ms

img_bbc3b230cf9672a6ded963209550becb.jpe

好了,第一個插件安裝設置完成了。下面我們安裝第二個插件,叫做markdown-image-assistant。安裝方法和剛才的插件一樣,不贅述了。安裝好后你會看到這樣的顯示。

img_4189037a2e847f74c2611b2aead7d390.jpe

這里,我們不需要調整設置。

好了,編輯器配置完畢,下面我們開始試用一下。

使用Cmd + N新建一個文件,保存名稱為test.md

然后我們輸入了這樣一些內容。

img_7ad455edb56ac4564befabafa3435a74.jpe

Ctrl+Shift+M呼叫預覽,我們可以看到右側邊欄出現了Markdown排版后的樣子。

img_cbae79917173bfba97aec0fc8eab6db1.jpe

基礎的Markdown排版一般不會有什么問題,下面我們來看看最讓圖文寫作者頭疼的項目——插圖。

插圖

我們用Markdown寫作的時候,一般插圖都會使用本地文件。但是排版完成,打算發布的時候,這些本地文件卻是無法被寫作平臺識別的。因此很多人本地排版Markdown預覽效果之后,又需要在寫作平臺上重新插圖一次。

想想都覺得恐怖。尤其是像我這樣,一篇文章里恨不得要放幾十張插圖的人。

有的人于是很激進地選擇就在云端寫作和插圖。這樣的好處是你寫作時候的插圖就可以直接發布,缺點是本地沒有副本。

這很不安全。因為寫作平臺也未必保證永續經營。如果某一天平臺宣布停止運營,你放置其上的一堆圖片怎么辦?

所以,最為貪婪的想法是——我在編輯器插圖,在本地存留備份,同時自動上傳一份插圖到云端圖床,以便發布使用。

你是不是覺得我這像是在做白日夢?

不是,其實這樣的設置你已經做好了。

不信?

現在我們就試一下。

我們在網上找到了一幅圖片。

img_aedace7a8478db92575be66787c9207f.jpe

我們把圖片存儲到本地,然后在Atom編輯器里找到合適的位置,把本地的那張圖片拖拽進來,奇跡就發生了。

img_87a3e7972d02f565d3c38eb4b7ccf29b.jpe

你可能會納悶——咦?我明明只插了一次圖像,為什么右側預覽里面有2張圖。

實際上,你看左側的Markdown語句,是這樣的:

![game-of-thrones-jon-snow-season-6-1080x608_sjva](http://upload-images.jianshu.io/upload_images/64542-9292e9669d76ced6.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![](/Users/wsy/Dropbox/markdown_export/repo/test-cd7de992.jpg)

這里是兩個插圖語句寫在了一行上。

第一部分是遠程圖床的插圖代碼,其后跟著的是本地插圖代碼。

這樣,你的一次拖拽,圖片就被保存在了本地assets目錄,并且同時被上傳到了云端。而相應的代碼,編輯器和插件都替你寫好了。

排版

把純文本的Markdown文件,變成移動互聯網上圖文并茂的漂亮文章,你需要用合適的樣式文件來排版。樣式文件(css)替你操心哪里用幾號字,什么標題用某種顏色,以及段間距多少之類的瑣碎事。

我目前使用的是尹航的css,他專門為移動設備閱讀做了優化。因為涉及版權保護問題,請自行搜索后下載,存儲為本地的css文件備用。

同類的css文件還有很多,例如李笑來、陽志平都有各自的版本分享出來。請根據自己的口味進行選擇。

選擇并存儲好css文件后,我們來安裝瀏覽器插件。

請在Google Chrome里面安裝Markdown Here插件。

img_dbea3d921749977ff3573d9ee489e25f.jpe

安裝后,右鍵點擊該插件圖標,在彈出菜單里單擊“選項”按鈕。

img_5607b6dcd15f58fc6171a8ba0e038c56.jpe

找到上圖這個文本框,把你下載好的css文件內容拷貝粘貼進去。

然后打開wangEditor

img_76fd34f2c80c40c4d4f181cac44343bd.jpe

回到Atom編輯器里面,把左邊欄寫好的Markdown格式文章全文拷貝,粘貼到wangEditor的編輯器窗口中。

img_ef53b0413e37b1b2ef0976aab7a0475c.jpe

點擊Chrome的Markdown Here插件,你會立即看到排版后的結果。

img_45cff9ff61ad8b2ac965d956ac7f7c09.jpe

確認排版效果一切正常后,全選wangEditor編輯區域的內容,拷貝。

打開知乎專欄的“寫文章”功能。

img_6d2fc6e925a46794b72a1700827bf328.jpe

在“請輸入正文”的部分,粘貼。

img_059010333d97cfcf663627ce0bfecfb4.jpe

你會看到,云端圖床的圖片正常顯示,本地鏈接圖片沒有正常上傳。不過這絲毫沒有關系

因為當你預覽或者發布的時候,看到的內容是這個樣子的:

img_d2c5328a09fed0537de78c6c7be1e410.jpe

好了,知乎專欄文章用Markdown排版成功!

討論

你平時都在哪些寫作平臺上發布文章?你使用Markdown了嗎?使用過程中有什么心得體會?遇到過哪些問題?相比本文,你是否有更好的編輯排版流程?你使用的編輯器是否更有特色?歡迎留言,記錄下你的思考,我們一起交流討論。

如果你對我的文章感興趣,歡迎點贊,并且關注我的文集“玉樹芝蘭”。

如果本文可能對你身邊的親友有幫助,也歡迎你把本文通過微博或朋友圈分享給他們。讓他們一起參與到我們的討論中來。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/280499.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/280499.shtml
英文地址,請注明出處:http://en.pswp.cn/news/280499.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Python FastApi:post文件與數據/本地端測試

FastAPI快速搭建 1 .uvicorn模塊用于啟動FastAPI,可以自定義端口,方便快速啟動,特別適合pycharm啟動。 2.app.post(/file/)自定義定義訪問路徑。 3. get_keyword_position() 內是需要輸入的參數,包含文件和變量。普通變量建議…

德國巴伐利亞山谷積雪遍地 汽車被大雪掩埋

當地時間1月24日,德古南部巴伐利亞一座村莊里,小汽車被大雪掩埋,只露出一角窗戶。當地時間2019年1月24日,德國加爾米施-帕滕基興,積雪遍地。圖為一名滑雪者在雪道上滑雪。當地時間2019年1月24日,德國加爾米…

macbook圖形化編程_如何判斷MacBook使用的是哪種圖形芯片(并進行切換)

macbook圖形化編程Apple’s top end MacBook Pros come with two graphics chips: an integrated Intel Iris Pro chip and a discrete graphics card with more power. That way, you can use the integrated chip when you need better battery life, and the more powerful …

跨集群流量調度實現 Kubernetes 集群金絲雀升級

有了多集群服務和跨集群的流量調度之后,使用 Kubernetes 的方式會發生很大的變化。流量的管理不再限制單一集群內,而是橫向跨越了多個集群。最重要的是這一切“靜悄悄地”發生,對應用來說毫無感知。就拿 Kubernetes 版本升級來說吧。記得曾經…

usr/bin/expect方式免密碼登錄和發送文件腳本

2019獨角獸企業重金招聘Python工程師標準>>> ssh 登錄 #!/usr/bin/expect set timeout 20 if { [llength $argv] < 3} { puts "Usage:" puts "remote_host password cmd" exit 1 } set remote_host [lindex $argv 0] set passwor…

8-[多線程] 進程池線程池

1、為甚需要進程池&#xff0c;線程池 介紹官網&#xff1a;https://docs.python.org/dev/library/concurrent.futures.htmlconcurrent.futures模塊提供了高度封裝的異步調用接口 ThreadPoolExecutor&#xff1a;線程池&#xff0c;提供異步調用 ProcessPoolExecutor: 進程池&a…

python 圖像識別pytesseract快速設置

一、安裝Tesseract 以window安裝為例&#xff0c;參考&#xff1a;https://segmentfault.com/a/1190000014086067 note&#xff1a; 使用虛擬環境需要&#xff1a; 在 python 環境&#xff08;或虛擬環境&#xff09; \Lib\site-packages\pytesseract 目錄下找到 pytessera…

香港連續25年被評為全球最自由經濟體

中新社香港1月25日電 美國智庫傳統基金會25日在華盛頓發表2019年《經濟自由度指數》報告&#xff0c;香港今年再次成為唯一一個總分超過90分的經濟體&#xff0c;已連續25年被評價為全球最自由經濟體。 報告顯示&#xff0c;香港今年的總分為90.2分&#xff08;100分為滿分&…

mac 下安裝jenkins

2019獨角獸企業重金招聘Python工程師標準>>> 平臺搭建 Jenkins安裝和啟動 官網&#xff1a;https://jenkins.io/index.html 下載&#xff1a;http://mirrors.jenkins-ci.org/war/latest/jenkins.war 安裝&#xff1a; 依賴于Java環境&#xff0c;首先安裝和配置Java…

safari 獲取視頻流_如何在Safari中將RSS feed和社交媒體合并為一個流

safari 獲取視頻流Safari allows you to subscribe to RSS feeds and add your social media accounts so you can view them right in the browser, in one universal feed, without the need of any add-on applications or extensions. Safari允許您訂閱RSS feed并添加您的社…

pytesseract:opencv預處理圖片

一、目的 原始圖片用pytesseract識別文字&#xff0c;精準度往往沒達到預期。使用opencv處理后&#xff0c;提高識別精準度。處理方法有 a.圖片轉成白底黑字。 b.截取圖片某固定區域。這個很重要&#xff0c;因為圖片包含圖標或其他形狀圖形&#xff0c;辨識導致錯亂的。 二…

編譯安裝Centos7.2+Apache2.4.25+PHP7.2.10+Mysql5.6.16

一、編譯部署Apache2.4.251、環境準備#設置或停止防火墻&#xff1a; [rootlocalhost ~]# systemctl stop firewalld.service [rootlocalhost ~]# systemctl disable firewalld.service#關閉selinux&#xff1a; 臨時關閉&#xff1a; [rootlocalhost ~]# setenforce 0永久關閉…

SDNU 1217 CD收藏——并查集

Description lmh平常愛聽歌&#xff0c;所以買了很多的CD來收藏&#xff0c;但是因為平常整理不當&#xff0c;所以忘記了這些CD的歌手是誰。現在他想知道他到底收藏了多少位歌手的專輯&#xff0c;于是他想了一個辦法&#xff0c;同時拿出兩個CD來聽&#xff0c;可以分辨出來是…

國際知名計算機視覺和機器學習軟件開源平臺OpenCV正式支持龍架構

前言介紹近期&#xff0c;OpenCV開源社區正式合入了對龍架構&#xff08;LoongArch?&#xff09;支持的代碼&#xff0c;基于龍架構自主指令系統&#xff0c;優化后的OpenCV性能顯著提升。OpenCV是一款跨平臺的計算機視覺和機器學習軟件平臺&#xff0c;在計算機視覺領域廣泛使…

優化器--牛頓法總結

---這里記錄下一些關于牛頓法來作為優化器的個人筆記 &#xff1a;&#xff09; 關于牛頓法&#xff0c;先不說其中的概念&#xff0c;來簡單看一個例子&#xff1f; 不用計算器&#xff0c;如何手動開一個值的平方根&#xff0c;比如計算{sqrt(a) | a4 } &#xff1f; 不用程序…

在命令提示符輸出c語言代碼_您可以在Windows命令提示符中更改輸出緩沖區的大小嗎?...

在命令提示符輸出c語言代碼If you are someone who loves using the Windows Command Prompt, you may have found yourself curious as to why the screen output buffer has such a ‘large’ default size. Can you change it to a smaller (or even larger) size? Today’…

django23:BS4/kindeditor上傳圖片

BS4 Beautiful Soup&#xff0c;Beautiful Soup 是一個可以從HTML或XML文件中提取數據的Python庫.它能夠通過你喜歡的轉換器實現慣用的文檔導航,查找,修改文檔的方式。 安裝 pip3 install beautifulsoup4 使用 from bs4 import BeautifulSoup#html_doc為網頁內容 soup Be…

設計模式——————觀察者模式

工廠模式分為簡單工廠&#xff0c;工廠和抽象工廠&#xff0c;三種工廠的實現是越來越復雜的。 觀察者模式 本質上就是一種訂閱/發布的模型&#xff0c;從邏輯上來說就是一對多的依賴關系。 什么意思呢&#xff1f;好比是一群守衛盯著一個囚犯&#xff0c;只要囚犯一有異動&…

SNMP簡介

SNMP簡介介紹SNMP的定義、目的、版本演進以及受益。 定義簡單網絡管理協議SNMP&#xff08;Simple Network Management Protocol&#xff09;是廣泛應用于TCP/IP網絡的網絡管理標準協議。SNMP提供了一種通過運行網絡管理軟件的中心計算機&#xff08;即網絡管理工作站&#xff…

詳解vue生命周期及每個階段適合進行的操作

VUE生命周期的四個階段 create 創建 -------- 創建vue實例并初始化mount 掛載 -------- 把vue實例和視圖進行關聯update 更新 ------- 監聽數據與視圖的變化destroy銷毀 ------- 銷毀實例生命周期 --- 鉤子函數 vue為上面的4個大的階段提供了一個可編程的接口&#xff0c;我們可…