分類彙整:materials

程式碼上色函式庫 highlight.js

功能

程式碼上色,可以用 syntax 找相關的英文資源 ,這個函式庫可以將部落格的程式碼文字依照關鍵字、註解等上不同顏色。

使用方法

  1. 引入 css 與 js 函式庫
  2. 依照規範撰寫pre tag 與 code tag
  3. 寫進指定 js 碼

※css有各種style。

一般網頁

外引CDN函式庫的方法

引入 js 與 css 函式庫

<head>
 
 //引入css,這裡選擇tomorrow style
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css" />

 //引入js
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
</head>

依照規範撰寫 pre 與 code

  1. pre tag 裡面包一層 code tag
  2. <code class=”程式語言名”>
//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

寫進指定 js

function custom(){
 hljs.initHighlightingOnLoad();
}
custom();

Display

CODEPEN

WordPress

header.php→引入 css 與 js 函式庫、寫入指定 js

<head>

//在head tag之間加上下面這3行
<!--highlight.js-->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/tomorrow.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>

</head>

<body <?php body_class(); ?>>

//在<body>下面加上這段script
<script>
hljs.initHighlightingOnLoad();
</script>

文章編輯:text editor→依照規範撰寫 pre 與 code

//以寫css碼為例
<pre>
 <code class="css">
  pre {
  border: 1px solid #eee;
  width: 400px;
 }
 </code>
</pre>

Display

CODEPEN

 

 

windows 日文字型介紹

使用方式

中文國字與日文漢字有微小差異,為防止漢字缺漏的問題(突然變成新細明體),套用日文字型前要先將中文國字轉為日文漢字。

轉換器

Win Mac 共通字體

游ゴシック
Windows8.1以後、MacOS10.9以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

游明朝 Windows8.1以後、MacOS10.9以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Win 單獨字體

メイリオ Windows Vista以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Meiryo UI Windows 7以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

MS Pゴシック Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

MS P明朝 Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

HGS明朝E Windows95以後

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Early Access Google Fonts

Google早期フォント Rounded M+ 1c

*Early Access Google Fonts在wordpress上面沒有效果
使用方法

@import url(http://fonts.googleapis.com/earlyaccess/mplus1p.css);
font-family: 'Mplus 1p';

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

Google早期フォント さわらびゴシック

使用方法

@import url(http://fonts.googleapis.com/earlyaccess/sawarabigothic.css);
font-family: 'Sawarabi Gothic';

世界がぜんたい幸福にならないうちは個人の幸福はあり得ない

神は人間に孤独を与えた。然も同等に人間に孤独ではいられない性質も与えた。

國字漢字轉換器

功能説明

轉換成日文漢字,方便使用網頁或文書處理的預設日文漂亮字型

日文字型一覽

範例

textarea#old
textarea#newText
textarea
 width: 300px
 height: 400px
//展示用文字
var text="這是一段中文内容的説明文\n注意觀察【内】﹐【説】的變化";

//使用陣列紀錄
//持續更新中
var replaceArray=[
 {from:"內",to: "内"},
 {from:"值",to: "値"},
 {from:"查",to: "査"},
 {from:"啟",to: "啓"},
 {from:"說",to: "説"},
 {from:"產",to: "産"},
 {from:"每",to: "毎"},
 {from:"蔥",to: "葱"}
];

//沒有對應的日文漢字
//喵

//origText到時候代入old的值
var translate = function(origText){
 for(i=0;i<replaceArray.length;i++){
 //取代全部 參考這篇文章
 var repAll=new RegExp(replaceArray[i].from, "g");

 origText=origText.replace(repAll, replaceArray[i].to);
 }
 return origText;
}

var old=document.querySelector("#old");
var newText=document.querySelector("#newText");

//先把展示用文字帶入
old.textContent=text;

//建立翻譯功能
newText.textContent=translate(old.value);

//綁定當old有輸入事件,觸發翻譯
old.addEventListener("input",
 function(){
 newText.textContent=translate(old.value);
 }
);

Display

See the Pen 漢字國字轉換器 by Ian Chen (@ianchen0419) on CodePen.

快速鍵

F功能鍵
F1 顯示説明
F2 為選取的項目重新命名
F3 搜尋檔案或資料夾
F4 顯示 [Windows 檔案總管] 中的網址列清單
F5 重新整理使用中的視窗
F6 將螢幕項目循環顯示在視窗中或桌面上
F10 啓動使用中程式的功能表列
Ctrl鍵
Ctrl+A 選取文件或視窗中的所有項目
Ctrl+C 複製選取的項目
Ctrl+Insert 複製選取的項目
Ctrl+X 剪下選取的項目
Ctrl+V 貼上選取的項目
Shift+Insert 貼上選取的項目
Ctrl+Z 復原動作
Ctrl+Y 重做動作
Ctrl+向右鍵 將游標移至下一字組的字首
Ctrl+向左鍵 將游標移至前一字組的字首
Ctrl+向下鍵 將游標移至下一段落的開頭
Ctrl+向上鍵 將游標移至前一段落的開頭
Ctrl+Shift及方向鍵 選取文字區塊
Ctrl及任一方向鍵+空格鍵 選取視窗或桌面上多個個別項目
Ctrl+F4 關閉正在使用的文件 (該程式允許你同時開啓多份文件)
Ctrl+滑鼠滾輪 變更桌面上圖示的大小
Ctrl+D 刪除選取的項目,並將它移至 [資源回收筒]
Ctrl+Esc 開啓 [開始] 功能表
Ctrl+Shift 啓用多種鍵盤配置時切換鍵盤配置
右邊或左邊 Ctrl+Shift 在從右到左的閱讀語言中變更閱讀方向
Ctrl+Shift+Esc 開啓工作管理員
Ctrl+Q 全螢幕照相(可用Ctrl+V貼上
Ctrl+Alt+del 重新啓動(熱開機)
Ctrl+Alt+< 叫出新注音標點符號小鍵盤
Ctrl+Space 切換至預設輸入法
Ctrl+End 跳至文件末端
Alt鍵
Alt+F4 關閉使用中的項目,或結束使用中的程式
Alt+空格鍵 開啓使用中視窗的捷徑功能表
Alt+Enter 顯示選取項目的内容
Alt+Tab 在開啓的項目之間切換
Alt+Esc 按項目開啓的順序循環顯示它們
Alt+底線字母 顯示相對應的功能表或執行功能表命令
Alt+向上鍵 檢視 [Windows 檔案總管] 中的上一層資料夾
其他快捷
Delete 刪除選取的項目,並將它移至 [資源回收筒]
Shift+Delete 刪除選取的項目,但先不將它移至 [資源回收筒]
Shift 及任一方向鍵 在視窗或桌面上選取一個以上的項目,或選取文件内的文字。
Shift+F10 顯示選取項目的捷徑功能表
Esc 取消目前的工作
當您插入 CD 時按 Shift 鍵 防止 CD 自動播放
按住Shift 跳過光碟自動執行功能
Windows 標誌鍵盤快速鍵
Windows 標誌鍵 開啓或關閉 [開始] 功能表
Windows 標誌鍵+D 顯示桌面
Windows 標誌鍵+M 將所有視窗最小化
Windows 標誌鍵+Shift+M 將最小化的視窗還原至桌面
Windows 標誌鍵+E 開啓我的電腦
Windows 標誌鍵+F 搜尋檔案或資料夾
Ctrl+Windows 標誌鍵+F 搜尋電腦 (如果你在網路上)
Windows 標誌鍵+L 鎖定電腦或切換使用者
Windows 標誌鍵+R 開啓 [執行] 對話方塊
Windows 標誌鍵+T 循環顯示工作列上的程式
Windows+R 開啓”執行”
Windows+E 開啓”檔案總管”
Windows+F or F3 開啓”搜尋”
Windows+D 顯示桌面
Windows+M 視窗最小化
Windows+TAB 在工作列做切換動作,須按ENTER作結束

線上資源

圖片

圖示

CSS

顏色與設計

Adobe系列

APP學習

網頁開發