痞客邦文章中插入程式碼區塊的方法

查了蠻多資料，結果不是連結停用就是程式碼根本不完整，我突然明白為什麼很少攻城獅使用痞客邦了~實在是，阿這就很難用啊XDD

最後查到了這一篇文章：在文章中插入灰底程式碼的方式

針對程式碼的部分，我做了一點點簡單的css美化，~~順便把因為我太廢了而看不懂的屬性都刪掉~~。

如果問我怎麼不自己寫的話，嗯……懶，而且弱嘛(攤手。

這個是我改過的code，效果大概就像這樣。

這樣寫是為了閱讀性，實作上要縮成一排哦！

記得要把第一行跟最後一行拿掉，那是註解的意思。

<!—

<pre style="margin: 15px;

padding: 20px; border-left: solid #00DDAA 4px;

font-size: 13px; line-height: 6px;

font-family: comic sans ms, Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif;

vertical-align: baseline;

max-height: 600px; overflow: auto;

background-color: rgb(239, 240, 241);

display: block; color: rgb(57, 51, 24);

text-align: left; text-indent: 0px;

word-spacing: 0px">

//你的code

</pre>

-->

使用方式非常簡單，編輯文章的頁面切換到原始碼頁面，把以下code包在程式碼前後即可。

~~如果你跟我一樣好學並且做為一個每天都在擔心因為太廢然後被fire的前端攻城獅，~~這邊查了人家原本的code用到的各個我不懂的屬性，還有一些我不知道的原始碼。

  不跳行空白(含分號)

" 引號(含分號)

Lucida Console 一個字體名字

所以，"Lucida Console" 應該(吧?)就是 “Lucida Console” 的意思

vertical-align和baseline的關係

https://www.fengerzh.com/vertical-align-baseline/

置中什麼的真的超級討厭，這篇文章寫得蠻好的可以看一下。

word-wrap: normal;

CSS3 word-wrap 屬性的功能是讓很長的單字可以切換到下一行，大部的瀏覽器預設值都是讓很長的單字保留完整，直接在跳倒下一行或是讓單字超出 DIV 區塊的範圍，如果這兩種情況都不是設計師想要呈現的效果，還有一種效果是讓單字＂被折到下一行＂，不會向右超出 DIV 區塊的範圍，也不會留過多空白在字串尾端，所有主流的瀏覽器都支援 CSS3 的 word-wrap 屬性。

https://www.wibibi.com/info.php?tid=CSS3_word-wrap_%E5%B1%AC%E6%80%A7

orphans: 2; ~~兩個孤兒~~。

規定可見行的最小數量，

widows. 指定列印時，一段文字最少幾行要印在下一頁頂端，

~~它們都非常任性的~~只支援Opera

http://www.runoob.com/jsref/prop-style-orphans.html

http://www.runoob.com/jsref/prop-style-widows.html

text-indent 段落首字縮排

http://www.wibibi.com/info.php?tid=171

text-transform 控制文章字母的大小寫

http://www.wibibi.com/info.php?tid=174

-webkit-text-stroke-width