Blogger設定 -新增程式碼

-
嗨嗨大家好，我是yanennn
我是前端新手，目前正在學習中，學習的過程中有人推薦要寫自己的部落格會比較好

 所以....

 我...
就在這裡了(?

 因為初次嘗試使用部落格，雖然以前也有玩過無名啦 (那算嗎???
總之~還請多多指教 ( 鞠躬
若有錯誤地方，也請告知
希望這邊能充斥程式生活
未來也會有我自己的個人生活..吧?
首先，要把這裡弄成程式，那當然就是要撰寫程式碼
一般你寫在撰寫區或者HTML裡，你會得到...

 eg1(寫在撰寫):
<button style="background-color: red; color: white; height: 30px; width: 80px;">這是按鈕</button>

 咦怎麼跟別人的不一樣?一定是我寫的地方錯誤!

 eg2(寫在HTML):
會直接產生會執行樣子

程式呢?大大我要的是程式碼RRR~


所以說呢，我們需要先做的事情就是，新增撰寫語法環境
喜歡普通的，可以參考第一個就好，若喜歡有樣式的，可參考第二個
自己喜歡最重要

簡單版

 →新增Html/Javascript小工具


1.打開左邊的版面配置




2.點選新增小工具


由於每個人的主題都不一樣，所以可能新增小工具放的位置也會有改變哦

3.點選HTML/JavaScript



4.打開後請在下面新增以下語法到大框框(1)裡，最後儲存
<style>
 .post .codeblock {
 display: block; /* fixes a strange ie margin bug */
 font-family: Courier New;
 font-size: 10pt;
 overflow:auto;
 background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 max-height:1000px;
 line-height: 1.2em;
 }
</style>

請記得(2)要勾選哦，不然無法顯示



 這樣就掛好套件了~~~
接著就是如何撰寫語法囉

→新增程式碼

      首先新增文章點選HTML後，寫上你的程式

這邊注意!!!

請記得

     1.請在你的你的語法前面後面加上
<pre class="codeblock ">
   ... 
    ...語法...
   ...
 </pre>
    2.中間包覆的語法有< >的都需要轉碼，例如HTML的element..等，到HTML Encoder，把要轉碼的程式碼貼過去，按下Encode按鈕，下面會產生轉碼後的程式，再複製貼到這裡



新增程式碼的格式

寫在HTML裡面

產生的樣子:

 
<!DOCTYPE html>

<html>

 <title>HTML Tutorial</title>

<body>

 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>

</body>

</html>


以上就是簡單版的
若你想在這裡面加點顏色，例如以下:
<!DOCTYPE html>

<html>

 <title>HTML Tutorial</title>

<body>

 <h1>This is a heading</h1>
 <p>This is a paragraph.</p>

</body>

</html>




首先到版面配置，點選新增小工具，裡面剛剛不是有在HTML/JavaScript新增CSS嗎
接下來請在他的下面，新增下面這一段JavaScipt

 
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>





這樣就好了，之後在原本的class:"codeblock "就修改成class:"codeblock prettyprint"就OK囉

 
<pre class="codeblock prettyprint">
  ...
   ...你的語法...
  ...
</pre>



接下來是有樣式的


樣式版

→挑選樣式並下載

首先到Prism這個網站，右邊圓圈(1)點選，下方Example會展示你點選的樣式，選擇你喜歡的樣式後，點右上的Download(2)
右邊(1)選擇樣式後可往下滑到Example看樣式


 接著選擇樣式、語言(新增自己想要的語言)、套件(新增自己要的套件)
選擇樣式和壓縮檔



選擇想要的語言

 有需要用到的可以先選擇起來

選擇想要的套件
可點選套件名稱進入，會有套件的說明
下載JS和CSS

 最後請下載JS和CSS檔

→新增HTML/JavaScript工具

回到Blogger，和簡單版一樣，點選版面配置，新增小工具，點選HTML/JavaScript





把剛剛下載的JS檔(可用筆記本打開)複製程式碼貼到內容裡，記得要前面加上<script>結尾加上</script>標籤 ，最後儲存

貼上JS檔並在開頭加入標籤

結尾加入標籤

 →新增CSS樣式

接著到主題、點選自訂，怕之前的樣式不見的話可以先按右上的備份




進入自訂後，點選進階、滑到最下面點選新增CSS樣式，把剛剛下載的CSS檔案(可用筆記本開啟)複製程式碼貼上到中間白色空白處，完成後點選"套用至網頁"就好囉
貼上CSS檔案

這樣就完成匯入囉

 之後就可以到HTML開心的寫程式了！

 


 <pre><code class="language-html line-numbers">
   ...
     ...語法...
   ...
 </code></pre>

把你的語言寫在<pre><code>裡面，每個語言class內會有些不一樣，假設是css就是language-css，js就是language-javascript，在language後面加上語言，若有增加套件就是在補class後補在套件class，像這邊就是新增line-numbers

 一樣記得，如果內容有包含< >或者特殊符號請記得到HTML Encoder轉碼哦

最後就會看到這種模式(我使用的是這種套件)

 

 <ul class="nav nav-tabs">
   <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
   <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
   <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
   <li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
 </ul>

最後希望大家都能找到自己喜歡的樣子！
上面有錯誤的也歡迎告知，謝謝
感謝收看到這裡的你和我: )
參考資料來源:https://pjchender.blogspot.com/2015/03/blogger.html

留言

張貼留言