這需要使用到與 上一篇底線教學 相似的功能，直接呼叫不同的CSS設定，使得整段文字的區域，不管是背景，字型，大小，框線等等，與其他文章文字不同而產生區別，在文章撰寫時是非常實用的工具，尤其像是提供code與長串編碼時，真的是幫大忙了！
這次的實作一樣是參考了 WFU Blog 的以下文章進行安裝和微調：
[教學]讓網頁使用各種特殊文字區塊__(1) 安裝與使用 (CSS 技巧)
在我的網誌上，目前有兩種需求：
在提供 code 的時候做出區別:
因此我採用了與WFU Blog 幾乎類似的Spec做修改。沿用了他提供的左側gif圖檔 (灰底白字code)，並更換了更接近黑色的底色，同時將框改成深灰色，字體尺寸訂為10pt，作為自己提供程式碼的CSS設定。另外我將呼叫此功能的HTML標籤，從po改為code ，這樣更容易讓我聯想到，如果要分享或記錄自己修改的程式碼，按出
<code> 程式碼內容 </code>
就能搞定
至於其他部分就沒有太大的調整了，備份如下。
因此我採用了與WFU Blog 幾乎類似的Spec做修改。沿用了他提供的左側gif圖檔 (灰底白字code)，並更換了更接近黑色的底色，同時將框改成深灰色，字體尺寸訂為10pt，作為自己提供程式碼的CSS設定。另外我將呼叫此功能的HTML標籤，
至於其他部分就沒有太大的調整了，備份如下。
<!--文章特定code區塊-->
<style type='text/css'>
code {
display: block; /*不必變動*/
overflow: auto; /*不必變動*/
font-family: Courier New; /*字型*/
font-size: 10pt;
/*字體大小*/
background:
#212121
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHGMf-aex3g2f8PRe9R78oZDGZhPGaGmIY_v8haliUzSw3NOFh30M8RBeiUn6Iq8kxpCyvaR2dn4_EGk6MVm01rt9lDXuQf2JJWmZ4sRAx-lEhc5ADosH2jExVOKacs0ult0HkYPtBKDi-/s1600/code.gif)
left top repeat-y;
/*#212121
可改為自訂區塊底色；url的括號裡面可改為自訂的圖片，而這個
code.gif 是張寬 11px 高 1200px
的圖片，只要自製一個長條圖案，此行的參數會讓這個長條圖案，貼在區塊最左側，由上往下重複顯示。*/
border: 1px solid #828282;
/*邊框的寬度、形態、顏色*/
padding: 10px 10px 10px 21px;
/*區塊文字分別距離邊框上、右、下、左的像素值*/
max-height:1200px;
/*設定區塊最高的長度，當超過時會出現捲軸。*/
line-height: 1.2em; /*行高*/
}
</style>
<script type='text/javascript'>
document.createElement("code")
</script>
<!-- -->
而我的另一種需求如下(成果也就是下方的模樣)
因此我刪除了code的圖檔，因此將區塊文字距離左側邊框的距離從原本21px拉回8px。此外，單純採用接近黑色的背景，深灰框，字體字型都沒有修改，字體採用略小的11pt，並將HTML標籤指令維持為
<!--文章特定公告區塊-->
<style type='text/css'>
po {
display: block; /*不必變動*/
overflow: auto; /*不必變動*/
font-family: Courier New; /*字型*/
font-size: 11pt;
/*字體大小*/
background: #212121;
/*#212121
可改為自訂區塊底色；url的括號裡面可改為自訂的圖片，而這個
code.gif 是張寬 11px 高 1200px
的圖片，只要自製一個長條圖案，此行的參數會讓這個長條圖案，貼在區塊最左側，由上往下重複顯示。*/
border: 1px solid #4A4A4A;
/*邊框的寬度、形態、顏色*/
padding: 10px 10px 10px 8px;
/*區塊文字分別距離邊框上、右、下、左的像素值*/
max-height:1200px;
/*設定區塊最高的長度，當超過時會出現捲軸。*/
line-height: 1.2em; /*行高*/
}
</style>
<script type='text/javascript'>
document.createElement("po")
</script>
<!-- -->
沒有留言:
張貼留言