2021-09-17 17:32:18

從上一篇文章開始注意排版了, 學(xué)習(xí)了阿文菌和縱筆浮生大佬的文章, 受益匪淺.

我個人比較喜歡簡明扼要, 如果一件復(fù)雜的事情可以像”如何把大象放冰箱”一樣三步走的表達清楚, 無疑是很有成就感的事情, 要不試試? 實現(xiàn)大佬們展示的效果可以不懂Markdown, 不用想辦法去登錄谷歌商城下插件 (這一步勸退很多人), 一切材料我這里都準備好了, 開箱即用, 好了我們開始吧.

首先你不需要去熟悉Markdown的語法

一句話說清楚Markdown, 它就像大家熟悉的word的簡化版本. 它格式少, 專注創(chuàng)作. 大部分寫作場景下, 我只要有標題, 加粗, 插入圖片等幾個格式就夠了. 直接看圖, 打出”刻舟求劍”幾個字, 圈住, 懸浮工具就可以很清晰的引導(dǎo)你去更改格式, 加粗斜體下劃線等等一應(yīng)俱全.

我喜歡wolai (或者typora也可以). 就是因為這種可視化工具幫你省去了學(xué)習(xí)生硬Markdown語法的過程.

至于圖片, 只需要把圖片拖拽到文字中即可, 或者復(fù)制圖片, 文字中粘貼也可以. wolai中有很多便捷操作, 眼到手到很自然, 需要自己在實踐中去解鎖, 個人覺得wolai勝過一票的所謂Markdown編輯器.

你只需要碼字, 調(diào)調(diào)格式, 最后導(dǎo)出Markdown格式的文件就行了.

導(dǎo)出的Markdown文件會以zip的形式下載下來, 解壓后可以看到后綴為.md的Markdown源碼文件 (就是個文本文檔哈), 以及圖片文件夾.

用typora打開.md文件, 可以看到和wolai中一樣的顯示效果.

關(guān)注內(nèi)容吧, 工具是用來服務(wù)創(chuàng)作者的.

其次如何把創(chuàng)作好的內(nèi)容發(fā)布到smzdm

smzdm編輯器是不能直接寫Markdown的, 你需要把markdown轉(zhuǎn)換成圖文富文本, 趁手好用的工具就是[Markdown here]插件.

安裝[Markdown here]插件

谷歌商店是不能訪問的, 不如直接找個離線包來安裝. 訪問極簡插件, 下載將得到一個zip包, 解壓得到同名文件夾, 記住當前的路徑, 后面要用到.

我使用的是百分瀏覽器 (谷歌內(nèi)核). 打開其擴展程序界面.

勾選開發(fā)者選項.

點擊加載已解壓的擴展程序按鈕, 選擇該文件夾即可安裝此插件.

導(dǎo)入成功就擁有了該插件了.

設(shè)置CSS代碼, 美化Markdown的顯示效果

其實只使用Markdown初始的效果也可以, 但還是要著重推薦一下縱筆浮生大佬調(diào)整的CSS美化代碼, 效果大氣上檔次, 已經(jīng)快成smzdm標配了. 代碼我貼到末尾, 只需要拷貝, 選對地方粘貼即可, 小白也沒問題.

進入[Markdown here]插件的選項, 會打開新的窗口.

找到[基本渲染CSS], 粘貼到這里, 會自動保存.

一步調(diào)格式

好了, 回到smzdm編輯器, 將wolai導(dǎo)出的.md文件的內(nèi)容拷貝下來, 粘貼到smzdm編輯器, 只需一步調(diào)格式, 全選后右擊點”Markdown轉(zhuǎn)換”菜單, 排版完成.

圖片怎么處理

稍微麻煩一點, 把wolai導(dǎo)出的image文件夾里的所有圖片傳到wolai, 對照著wolai中的順序, 依次點擊插入. 對了, 注意先把.md中圖片的語句刪掉, 搜”布之后這些會變成未識別的圖片框框.

肯定有人會說可以用圖床啊, 我不用圖床是有原因的. 圖床可能初期很方便 (比如借助圖床工具+typora自動上傳得到外鏈), 但后期維護成本很大. 免費圖床會擔(dān)心掛掉, 付費圖床需要持續(xù)投入成本. 使用了幾年markdown之后, 個人更覺得圖片應(yīng)該和markdown文字不分離才是最方便的. wolai剛好可以托管我的所有筆記+圖片, 為了保險我也同時做了本地備份. 多說一句, 云筆記托管最大的好處就是有歷史版本追溯, 重要性會隨著時間的流逝而愈加凸顯.

還有幾個稍微要注意的地方

1) 碼字時盡量用smzdm能夠識別的Markdown語法

smzdm只支持一部分Markdown格式, 所以為了避免再次調(diào)整格式, 盡量用smzdm能夠識別的Markdown語法吧. 必要的妥協(xié)是為了更高的效率. 比如標題只用二級標題和三級標題, 其他的smzdm都不識別, 不識別就意味著你拷貝到smzdm還要單獨調(diào)整格式, 所以我不用.

像加粗, 斜體, 鏈接都是通用的.

2) 如何處理附件

我選擇將附件統(tǒng)一傳到天翼云, 選這個平臺的原因有三: 速度比百度云快, 沒有藍奏云的文件大小限制, 免費.

總結(jié)

是不是很簡單, 輕松擁有大佬級的排版效果. 還不嘗試一下.

總結(jié)一下, wolai快速碼字貼圖, 導(dǎo)出得到Markdown, 回到smzdm編輯器粘貼, 再全選用[Markdown here]處理一下, 即可發(fā)文.

工具趁手就專注內(nèi)容吧, 祝碼字愉快.

最后, 附上縱筆浮生大佬的代碼, 再次感謝大佬的分享精神.

.markdown-here-wrapper { /*Markdown Here 的全局配置，沒有默認值*/

font-size: 14px; /*字號em默認是相對16px的大小，也可直接用px作單位*/

line-height:28px; /*行間距，可用百分比，數(shù)值倍數(shù)，像素設(shè)置，還包括text-indent縮進、letter-spacing字間距*/

word-spacing: 1px; /*字間距*/

letter-spacing: 1px; /*字母間距*/

margin: 0 3px 14px 3px;

}

pre, code {/*pre和code用于代碼顯示，code通常以元素框即代碼塊顯示，pre則只保留代碼中的空格與換行符*/

font-size: 14px; /*代碼字體*/

font-family: Avenir, "PingFangSC-Light";

margin: auto 5px;

}

code { /*標簽通常只是把文本變成 等寬字體*/

white-space:nowrap; /*如何處理元素內(nèi)空白行，回車or忽略,nowrap不換行，pre-wrap換行*/

border: 1px solid #EAEAEA; /*邊框，用于設(shè)置邊框?qū)傩裕?px為邊線尺寸，solid意為實線，#EAEAEA為邊框顏色*/

border-radius: 2px; /*給 div 元素添加圓角的邊框*/

display: inline;/*inline 表示按照內(nèi)聯(lián)模式顯示，它會和周圍的元素在一行。如果是 display:block, 它會和周圍的元素不在一行，自己單獨一行。*/

}

pre { /*嚴格限制為等寬字體格式*/

font-size: 18px;

line-height: 1.4em; /*行高*/

display: block !important;

}

pre code {

white-space: pre;

overflow: auto;

border-radius: 3px;

padding: 1px 1px;

display: block !important;

}

strong, b{ /*strong 加粗，用粗體顯示，也可以自定義自己的強調(diào)方式 */

color:#BF360C !important;

font-size:15px !important;

}

em, i { /*斜體*/

color: #BF360C !important;

}

hr { /*分割線*/

border: 0px dotted#BF360C; /*雙跟分割線 粗細，solid顏色 #a5a5a5 */

border-top:1px dotted#BF360C !important;/*上分割線 粗細，顏色#ddd跟隨主設(shè)定，solid類型-不寫是跟隨標題主色，替換了顯示新顏色 */

border-bottom:0px dotted#BF360C !important ; /* 下分割線，粗細solid類型-不寫是空心，顏色 */

margin:10px 0 10px 0 !important; /*外邊距*/

}

a:link { /* 未被訪問的鏈接 */

color:#009688 !important; /*顏色*/

font-style:normal !important; /*字重*/

}

a:visited {/* 已被訪問的鏈接 */

color:#009688 !important; /*顏色*/

font-style:normal !important; /*字重*/

}

a:hover {/* 鼠標指針移動到鏈接上 */

color:#009688 !important; /*顏色*/

font-style:normal !important; /*字重*/

}

/*段落設(shè)置，內(nèi)邊距用padding*/

p {

font-family: Avenir, "PingFangSC-Light" !important;

padding: 0 0 !important;

text-align: justify !important;

font-size: 15px !important;

text-indent:0; /*首行縮進*/

}

table, pre, dl, blockquote, q, ul, ol { /*表格、預(yù)格式化、定義列表、塊引用、短引用、無序列表、有序列表統(tǒng)一設(shè)置*/

margin: 10px 5px;

}

ul, ol { /*無序、有序列表通用設(shè)置*/

padding-left: 15px;

font-family: Avenir, "PingFangSC-Light" !important;

text-align: justify !important;

font-size: 14px !important;

}

li { /*列表中項目的設(shè)置*/

margin: 10px;

}

li p { /*列表中項目的段落的設(shè)置*/

margin: 10px 0 !important;

}

ul ul, ul ol, ol ul, ol ol {/*有序列表、無序列表的統(tǒng)一設(shè)置*/

margin: 0;

padding-left: 10px;

}

ul { /*無序列表的前綴，circle,square,好多種,同樣有序列表ol也可以設(shè)置不同的標記*/

list-style-type: circle;

}

dl { /*自定義列表的設(shè)置*/

padding: 0;

}

dl dt { /*自定義列表項的設(shè)置*/

font-size: 14px;

font-weight: bold; /*字重*/

font-style: italic; /*字形*/

}

dl dd {

margin: 0 0 10px;

padding: 0 10px;

}

blockquote, q { /*引用塊設(shè)置*/

border-left: 2px solid #BF360C;

padding: 0 10px;

color: #777;

quotes: none;

margin-left: 1em;

}

blockquote::before, blockquote::after, q::before, q::after {

content: none;

}

/*各級標題統(tǒng)一設(shè)置*/

h1, h2, h3, h4, h5, h6 {

margin: 7px 0 7px 0; /*段前后、左右縮進值*/

padding:5px 0 5px 0;/*內(nèi)邊距,控制和黑線的距離第一個數(shù)控制和上劃線的距離.上右下左,留白距離、縮進值*/

font-style: bold !important;

color: #BF360C !important;

}

h1 {

font-size:16px !important;

color:#BF360C !important;/*顏色*/

text-align:center !important; /*標題位置,center,right,left*/

font-weight:bolder !important; /*字重bold加粗 、 normal正常、bolder更粗*/

letter-spacing: 3px !important;

border:2px solid #BF360C !important; /* 邊框樣式 */

}

h2 {

font-size:16px !important;

margin-top:3px 0 !important;

padding: 3px 15px !important;

text-align:center !important; /*標題位置,center,right,left*/

background-color: #BF360C !important;

color: white !important; /*顏色*/

font-weight:bolder !important; /*字重bold加粗 、normal正常、bolder更粗*/

letter-spacing: 3px !important;

font-variant: normal !important;/*normal 、small-caps*/

border-top:0 solid#BF360C !important;/* 粗細，顏色#ddd跟隨主設(shè)定，solid類型-不寫是跟隨標題主色，替換了顯示新顏色 */

border-bottom:0 solid#BF360C !important ; /* 粗細solid類型-不寫是空心，顏色 */

}

h3 {

font-size:15px !important;

color:#BF360C !important;

padding: 5px 0 !important;

text-align:left !important; /*標題位置,center,right,left*/

width:auto !important;

padding:0 auto !important;

}

h4 {

font-size: 14px !important;

text-align:left !important; /*標題位置,center,right,left,justify*/

color:#BF360C !important;

padding: 0 0 0 7px !important;

border:1px dotted #BF360C !important;

font-weight:normal !important; /*字重*/

}

h5 {

font-size: 14px !important;

text-align:left !important; /*標題位置,center,right,left,justify*/

color:#BF360C !important;

padding: 0 0 0 7px !important;

border:1px solid #BF360C !important;

font-weight:normal !important; /*字重*/

}

h6 {

font-size: 14px;

color:white !important; /*顏色*/

font-style:normal !important; /*字重*/

padding: 0 0 0 7px !important;

background-color: #BF360C !important;

font-weight:normal !important; /*字重*/

}

table { /*表格元素的設(shè)置*/

padding: 0;

border-collapse: collapse;

border-spacing: 0;

font-size: 1em;

font: inherit;

border: 0;

margin: 0 auto;

}

tbody { /*表格主題的設(shè)置*/

margin: 0;

padding: 0;

border: 0;

}

table tr {

border: 0;

border-top: 1px solid #CCC;

background-color: white;

margin: 0;

padding: 0;

}

table tr:nth-child(2n) {

background-color: #F8F8F8; /*背景色*/

}

table tr th, table tr td { /*tr為行標簽、th為表頭單元格標簽、td為普通單元格標簽*/

font-size: 16px;

border: 1px solid #CCC;

margin: 0;

padding: 5px 10px;

}

table tr th {

font-weight: bold;

color: #eee;

border: 1px solid #BF360C; /*表頭邊框色*/

background-color: #BF360C; /*表頭背景色*/

}