分享幾個掘金專欄文章佈局的小技巧

這波能反殺發表於2019-03-04

分享幾個掘金專欄文章佈局的小技巧

越來越多的人開始使用掘金專欄寫部落格，分享技術。我們知道掘金的文章編輯工具是支援markdown語法的，並且還與實時預覽。可以說是一款非常強大的編輯工具了。但是，它還有另外一個強大的能力可能很多人不知道，那就是還支援html標籤，或者說是沒有過濾html標籤~。

這意味著，掘金專欄的文章佈局擁有無限的可能。

1. 修改字型顏色，大小，行高，字間距等。

我就是我，是顏色不一樣的煙火

<span style="color: orange">我就是我，是顏色不一樣的煙火</span>複製程式碼

天空海闊，要做堅強的泡沫

<p style="color: #ffe100; font-size: 30px; margin: 20px 0">天空海闊，要做堅強的泡沫</p>複製程式碼

2. 圖片處理，可以自定義寬高。

分享幾個掘金專欄文章佈局的小技巧

<img width="300" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1491240132246&di=b6e11e9e1d56ca5dea76f8c5120d30eb&imgtype=0&src=http%3A%2F%2Fa4.att.hudong.com%2F38%2F47%2F19300001391844134804474917734_950.png">複製程式碼

3. 利用iframe引入外部demo，讓你的文章可讀性更高。

<iframe height=`265` scrolling=`no` title=`Hi!` src=`//codepen.io/elizaknep/embed/xqMzgd/?height=265&theme-id=0&default-tab=html,result&embed-version=2` frameborder=`no` allowtransparency=`true` allowfullscreen=`true` style=`width: 100%;`>See the Pen <a href=`http://codepen.io/elizaknep/pen/xqMzgd/`>Hi!</a> by Beth Knepper (<a href=`http://codepen.io/elizaknep`>@elizaknep</a>) on <a href=`http://codepen.io`>CodePen</a>.
</iframe>複製程式碼

4. 更多可以想象的佈局嘗試，例如直接來個佈局演示。

1

2

<div style="display:flex;height: 40px;">
    <div style="flex:1;border:1px solid red;">1</div>
    <div style="flex:1;border:1px solid red;">2</div>
</div>複製程式碼

怎麼樣，是不是沒想到吧，趕緊去嘗試一下，讓你的文章更加豐富多彩具有更高的可讀性！！！！！！！

我是無私奉獻的好人，讚我吧，哈哈！！

相關文章