跳到主要內容

Blogger Code Syntax Highlighting with Prism

Prism

image-2

Prism 是一款簡單又好看，好用的要死的 Code Syntax Highlighting 套件，輕量化，而且 plugin 又多方便套用自己擅長的的程式語言。

使用方式

安裝在 Blogger 上其實大同小異，可以參考

免費的 CDN

一開始我是用 GoogleDriver 來當免費的 css 跟 js hosting，但幾次改版後，hosting 的功能就失效了。於是改用免費的 CDN 。
推薦一下 JSDELIVR，可以免費幫你把多個 js ，Collection 成一個 resource，一次引用
http://www.jsdelivr.com/projects/prism

這個 Bloger 用到的 Resource

css

https://cdn.jsdelivr.net/g/prism@1.6.0(plugins/ie8/prism-ie8.css+themes/prism-okaidia.css+plugins/line-numbers/prism-line-numbers.css+plugins/previewer-color/prism-previewer-color.css)

css 使用方式


<link href='https://cdn.jsdelivr.net/g/prism@1.6.0(plugins/ie8/prism-ie8.css+themes/prism-okaidia.css+plugins/line-numbers/prism-line-numbers.css+plugins/previewer-color/prism-previewer-color.css)' rel='stylesheet'/>

JS

https://cdn.jsdelivr.net/g/prism@1.6.0(prism.js+components/prism-java.min.js+components/prism-javascript.min.js+components/prism-php-extras.min.js+components/prism-php.min.js+components/prism-bash.min.js+components/prism-clike.min.js+components/prism-markup.min.js+plugins/line-numbers/prism-line-numbers.min.js+plugins/previewer-color/prism-previewer-color.min.js)

JS 使用方式


<script src='https://cdn.jsdelivr.net/g/prism@1.6.0(prism.js+components/prism-java.min.js+components/prism-javascript.min.js+components/prism-php-extras.min.js+components/prism-php.min.js+components/prism-bash.min.js+components/prism-clike.min.js+components/prism-markup.min.js+plugins/line-numbers/prism-line-numbers.min.js+plugins/previewer-color/prism-previewer-color.min.js)' type='text/javascript'/>
標籤：

留言

張貼留言

這個網誌中的熱門文章

Parse URI query string to Key Value

Parse URI query String to Map 做 urlDecode 處理 沒有任何 query String 回傳 Empty Map 確保只處理 key-value 結構的 query String package com.example.util; import lombok.extern.slf4j.Slf4j; import org.apache.http.client.utils.URIBuilder; import java.io.UnsupportedEncodingException; import java.net.URI; import java.net.URISyntaxException; import java.net.URLDecoder; import java.util.LinkedHashMap; import java.util.Map; import java.util.Objects; /** * Created by jerry on 2017/12/28. * * @author jerry */ @Slf4j public class UriUtil { private UriUtil() { } public static Map splitQuery(final String uri) { Map queryPairs = new LinkedHashMap (); try { final URI uri = new URIBuilder(uri).build(); final String rawQuery = uri.getRawQuery(); log.info("CurrentUrl Query: {}", rawQuery); // 過濾沒有 query string // 還有過濾無法成對 keyValue 的 query, e.g. http://host/path?123 if (Objects.isNull(rawQuery) |...
張貼留言
閱讀完整內容

Google Compute Engine‎ - AccessDeniedExceptions 403

原因 打算從 instance 打包 logs 到 google cloud storage 發生了 AccessDeniedException: 403 Insufficient OAuth2 scope to perform this operation. , 看起來是 instance 沒有 storage 權限 解決 Reference: https://cloud.google.com/compute/docs/access/create-enable-service-accounts-for-instances#changeserviceaccountandscopes 重新設定 service account 權限 instance 上內建有 gcloud , 就直接用現有的工具查詢一下 instance 的 account. $ gsutil info 或者在本機直接 gcloud compute instances describe INSTANCE_NAMES Account: [alpha-number-compute@developer.gserviceaccount.com] Project: [our-project-name] 會看到 instance 的一些狀態, 接下來就簡單多了, 按照下列的說明, 要先 stop instance, 更改 storage scope 再重新 start 。 To change an instance's service account and access scopes, the instance must be temporarily stopped. To stop your instance, read the documentation for Stopping an instance. After changing the service account or access scopes, remember to restart the instance. # Stop Instance gcloud compute instances stop INSTANCE_NAMES # 設定 storage scope 為 full (Read, Write) gcloud co...
張貼留言
閱讀完整內容

Spring-boot Thymeleaf Html5 SAXParseException 解析錯誤

thymeleaf 解析 html5 出錯 <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>SB Admin - Start Bootstrap Template</title> <!-- Bootstrap core CSS--> <link href="../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom fonts for this template--> <link href="../static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <!-- Page level plugin CSS--> <link href="../static/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> <!-- Custom styles for this template--> <li...
張貼留言
閱讀完整內容