Google Code Prettify

2016年11月26日土曜日

SyntaxHighlighterをFirebaseに置いてBloggerで利用

プログラムソースコードやシェル実行をブログ上でみんながどうやって表示しているのか勉強しました。まずは簡単に枠をつけたいです。

HTMLのお勉強・枠をつける
http://jim-do-it-yourself.jimdo.com/4-プチ-カスタマイズ/htmlのお勉強-枠をつける/

綺麗に色をつけたりするのは、SyntaxHighlighterがメジャーなようです。これをブラウザに読み込ませた上で、HTMLのpreタグなりscriptタグを使うのだそうです。

ソースコードをハイライトするSyntaxHighlighter3.0を使いこなす
http://wada811.blogspot.hk/2012/02/syntaxhighlighter30.html

で、環境を整える必要があるのですが、SyntaxHighlighterをどこかに展開して、Webでアクセスできるようにした上で、Bloggerのテンプレートに手を入れる必要があるという。。

BloggerでFirebaseホスティングを用いてSyntaxHighlighterを使う
https://xanadu62.blogspot.hk/2016/10/bloggerfirebasesyntaxhighlighter.html

Firebaseに置いておきました。こんな感じでアクセスできるようにしてあります。
https://public-on-firebase.firebaseapp.com/scripts/shCore.js

サンプルはこんな感じ。こうやってHTMLを書くと、
こんなように表示される。
/**
 * The HelloWorldApp class implements an application that
 * simply prints "Hello World!" to standard output.
 */
class HelloWorldApp {
    public static void main(String[] args) {
        System.out.println("Hello World!"); // Display
    }
}