你的掘金文章本能夠這麼炫（博客美化工具一波帶走）

前言

你盼世界， 我盼望你無bug。Hello 你們好！我是霖呆呆！

這篇文章不是一篇技術文，主要是提供給你們一些美化掘金文章的方法。

對比各大博客平臺，掘金的文章樣式算是這個👍了，可是有人曰：

👣

沒有最好，只有更好

」

也許咱們還能夠用一些別的方式來讓咱們的文章更具備個性化, 試想一下，在你辛辛苦苦精心盡力的寫完了一篇文章以後，再花上一小點時間來美化你的文章樣式。

這樣不只你本身看着舒服，讀者在閱讀到你的文章以後也會眼前一亮：「咦～ 這小夥子（小姑娘）的文章是挺有特色的哈！」

加油.jpg

因此在此我就向你們pick一些我寫博客時用到的好的工具。

我自己是一名前端開發，不過這篇文章的內容對職業沒有限制，若是涉及到一些前端方面的內容我也會盡可能說的詳細，因此請放心「食用」吧 😁。

經過閱讀本篇文章你能夠學習到：

• 使用 markdown-nice來美化文章樣式
• markdown代碼片斷中的 diff類型
• 設計製做封面大圖
• 使用 vscode插件- Polacode-2019截取代碼圖

使用markdown-nice來美化文章樣式

你們能夠看到個人文章樣式會有點特別（也有點好看），這是由於我使用了一個名爲markdown-nice的排版工具。

這個排版工具支持微信公衆號排版、知乎、掘金、博客園和 CSDN 等平臺。

我我的主要是用在掘金、微信公衆號上比較多（簡書上我也有寫文章，不過貌似不支持）。

這是體驗地址：markdown-nice體驗地址

工具簡介

在markdown-nice中有很是多的主題能夠供你們使用：

例如我就比較喜歡用紅緋這一主題（畢竟本命年但願紅一點[表情包害羞]）

下面是一些主題的截圖：

橙心👆

綠意（綠綠的多好看）👆

紅緋👆

山吹👆

薔薇紫（紫色表明着高貴）👆

固然若是你以爲上面提供給你的這些主題都還差了點意思，你也能夠自定義CSS來編寫本身的主題。

另外對於咱們程序員來講，代碼塊也是常常用到的，markdown-nice也提供了幾種代碼塊的主題：

幾種好看的代碼塊截圖：

auto-one-dark 主題 👆

auto-one-light 主題 👆

monokai 主題 👆

github 主題 👆

如何使用markdown-nice

好了 😊， 說了這麼多讓咱們來看看如何使用它吧。

使用方式有兩種，分爲在線使用和下載項目到本地運行使用，不管哪種均可以。

1. 在線使用

第一種方式你能夠直接在剛剛我介紹的 markdown-nice體驗地址 中使用它。

在左側編輯好你的文章內容， 選好主題以後，點擊這個頁面右上角的微信圖標或者知乎圖標，此時就已經複製成功了。

(不過最新的版本已經支持掘金了，在知乎圖標的下方有一個掘金圖標)

以後到掘金或者其它平臺上點擊「寫文章」，而後Ctrl + V 粘貼一下就能夠了。

第一步

第二步

（感謝該項目的做者畫手特地跑到本文中指出還能夠進行自定義CSS，以前一直忽視了這個功能，抱歉）

若是你對於樣式有一些本身的想法的話，還可使用這裏的自定義功能，點擊主題中的"自定義"，還有把下面的"查看自定義"主題打開，就能夠進行自定義了：

例如我這裏的紅緋主題，在使用「引用」功能的時候，會將引用的內容設置爲黑色底，同時邊上有一個蘋果的icon：

可是這個蘋果的icon在非IOS系統的手機和電腦上就顯示不出來了，也許咱們能夠將它替換成本身想要的字或表情。

經過元素查找，我發現它是用僞類來實現的：

所以我在主題CSS中對該樣式進行修改：

如上圖，原來的蘋果圖標變成了我修改的腳印。

2. 克隆項目到本地運行

因爲該項目是開源免費的，因此你也能夠直接去github上克隆至本地使用：

（不過線上地址已經知足了幾乎全部的需求，因此不用本地運行也能夠）

GitHub項目地址：https://github.com/mdnice/markdown-nice

其實到了這一步若是你是前端童鞋的話應該都知道怎麼使用了，無非就是安裝依賴再本地運行就能夠了。

若是你沒接觸過這一塊的能夠接着往下看。

1. 項目下載到了本地以後，咱們須要先安裝上依賴。所以你得保證你的本地電腦中安裝了 node.js，若是沒有安裝的話，能夠在 node.js下載這個連接中下載安裝。你能夠在終端經過一下命令檢查你有沒有安裝成功：

node -v
// or
npm -v
複製代碼

以上兩個指令均可以，-v表示查看版本號。

2. 將項目用編輯器打開， vscode, HBuilder等等均可以, 而後在項目根目錄輸入命令：

npm install
// or 簡寫爲
npm i
複製代碼

這一步是爲了根據package.json中的配置安裝相應的依賴，執行完以後你應該能夠看到根目錄下多出了一個node_modules文件夾。

3. 執行指令，本地啓動項目：

npm run start
複製代碼

完了以後，它會本身打開localhost:3000頁面，效果和在線編輯的同樣。

另外markdown-nice也能夠容許你把它當成組件在項目中使用，具體能夠看官方給出的文檔，很詳細。

markdown代碼片斷中的diff類型

還有一些小夥伴比較好奇我代碼片斷中的 "+"、"-" 是怎麼來的, 好比這樣：

這裏是你的代碼片斷
+ 我是一段新增的
- 我是一段被刪除的
複製代碼

這其實只要把代碼片斷的類型設置爲diff就能夠了：

在Typora中：

設計製做封面大圖

另外在掘金中，是如何給文章加上本身的封面大圖的呢，好比下面這種效果：

能夠在你要發佈的時候，點擊這個圖片icon進行添加封面：

那麼問題來了，你說的這些我都知道，那我可獲得哪去畫這些好看的圖片呢？你總不能讓我先從photoshop入門開始學吧？

你把我當成了什麼.jpg

對於這一塊，其實你度娘 🔍公衆號封面圖片 應該會有不少的工具，這邊我就介紹一下我經常使用的工具吧。

一個是 Canva, 主頁長成這樣：

還一個是圖怪獸：

再就是能夠在線PS的 uupoop:

裏面不論是公衆號封面仍是海報封面都應該夠知足咱們愛漂亮的需求了。

如何製做GIF動圖

製做GIF動圖分爲兩塊：

• 錄製屏幕並製做 GIF圖
• 製做公衆號 GIF圖

錄製屏幕並製做GIF圖

有時候咱們在寫博客時可能須要一張這種的GIF圖使咱們介紹的內容更加有靈性:

Mac製做GIF動圖

在Mac上你只須要簡單的兩步：

1. 使用電腦自己的 屏幕快照來進行屏幕錄製，錄製的文件爲 mov格式的視頻

2. 在 AppStore中下載並安裝 PicGif Lite, 而後在這裏面將前面錄製好的 mov視頻轉成 GIF動圖

如今你就能夠將你的GIF圖片運用到文章中了！

在Windows製做GIF動圖

Windows上錄製並製做GIF動圖的工具好像更多，因爲霖呆呆身邊暫時也沒有Windows電腦，因此度娘 🔍 了一些來僅供參考，固然有推薦的比較好的工具的小夥伴能夠評論中留言，霖呆呆會更新到文章中，感謝🙏。

• LICEcap
• 迅捷GIF製做

製做公衆號GIF圖

有些時候你可能還須要一張相似下面👇公衆號二維碼的GIF動圖，讓人感受你是個陽光帥氣（超 級 自 戀）的小靚仔。

你能夠經過前面我介紹的稿定設計來製做本身的GIF動圖：

注意⚠️：

想要將GIF動圖上傳到掘金文章中來，最好不要使用複製粘貼的方式上傳，而是點擊「編寫文章」頁面中左下角的「點擊上傳圖片」的icon來上傳：

(由於我發現我直接CV進來的圖並非動態的GIF圖片，不知道是否是我姿式不對...)

使用vscode插件-Polacode-2019截取代碼圖

這裏再安利一波vscode的插件Polacode-2019（主要是看胖哥的視頻知道的）。

它支持幫咱們截取好看的代碼圖：

code.png

（固然這對於想要複製你代碼的小夥伴好像不太友好了。。。）

能不能愉快的玩耍了.jpeg

這裏就須要你的編輯器是VSCode了。

在VSCode左側的插件商場中搜索：Polacode-2019（還有一個插件是Polacode, 可是2019功能要更多一些）

關於它的使用說明，在插件介紹中也說的比較詳細了，或者你能夠看胖哥的這期視頻來了解它：技術胖-VSCode中快速生成漂亮的代碼截圖

後語

你盼世界， 我盼望你無bug。這篇文章就介紹到這裏了，主要是分享一些我日常寫博客的工具。固然若是您不喜歡這些「花裏胡哨」的東西的話也能夠不使用它們。不過，不喜勿噴哦。

最後，點個贊再走唄 😊 ～

喜歡霖呆呆的小夥還能夠關注霖呆呆的公衆號 LinDaiDai 或者掃一掃下面的二維碼👇👇👇.

我會不定時的更新一些前端方面的知識內容以及本身的原創文章🎉

你的鼓勵就是我持續創做的主要動力 😊.

相關推薦:

《全網最詳bpmn.js教材》

《JavaScript進階-執行上下文(理解執行上下文一篇就夠了)》

《霖呆呆你來講說瀏覽器緩存吧》

《怎樣讓後臺小哥哥快速對接你的前端頁面》

《建議改爲: 讀完這篇你還不懂Babel我給你寄口罩》

本文使用 mdnice 排版