SSブログ

ブログにソースコードを貼る "Google Code Prettify" が使えなくなっていた件 [ソフト一般]

GW開けからブログに貼ったソースコードが随分味気ないものになってしまっていました。

こんな感じです。

#include <stdio.h>

void main() 
{
   printf("Hello World\n");
   return;
}


どうも "Google Code Prettify" が使えなくなっているようです。

さ~て困りました。"Syntax Highlighter" は仕込んであるので、そちらを使ってもいいのですが、今まで ”Google Code Prettify” を使った記事を見捨てるのも忍びない。

ということで、対策を考えることにしました。”Google Code Prettify”のページに飛んでみると、、、


google code prettify.pnghttps://code.google.com/archive/p/google-code-prettify/


あらら、いつの間にか GitHub に移行していたのね。分かりやすい理由です。

しかし、GitHub にあるチュートリアルはスクリプトをサーバーにコピーして使う前提。私のように、グーグル師匠のリポジトリを直接参照して楽しようという輩は相手にしないということなのか?

目を皿のように”Google Code Prettify”のリポジトリを探索し、ようやく解決策が見つかりました。下記”おまじない”に差し替えれば、素敵な感じに生まれ変わります!


<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&skin=sunburst&lang=css" defer="defer"></script>
※hは半角hに置き換えて下さい

"skin"は四種類用意されていて、引数を変えることで置き換えることができます。

desert
doxy
sons-of-obsidian
sunburst


ソネブロで ”Google Code Prettify” を設定する方法は下記の記事を参照してください。少々高度な設定を使いますので、あくまで自己責任でお願いしますね。


ソネットブログにソースコードを貼る方法
http://makers-with-myson.blog.so-net.ne.jp/2014-10-31


使っているテンプレート・テーマによっては、文字装飾が継承されて、見にくい場合があるかもしれません(私がそうでした)。その場合は CSS に <pre>要素の追加定義をしてあげてください。


pre {text-shadow:none; font-weight:normal;}


以上の対策を講じて、こんな感じになりました。使用したskinは"sunburst"です。


#include <stdio.h>

void main() 
{
    printf("Hello World\n");
    return;
}



いかがでしょう?少しくどいですけど、ちょっと素敵になりましたね。
(^_^)/~






プログラミングコンテストチャレンジブック [第2版] ~問題解決のアルゴリズム活用力とコーディングテクニックを鍛える~

プログラミングコンテストチャレンジブック [第2版] ~問題解決のアルゴリズム活用力とコーディングテクニックを鍛える~

  • 作者: 秋葉拓哉
  • 出版社/メーカー: マイナビ
  • 発売日: 2012/01/28
  • メディア: 単行本(ソフトカバー)



いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

いちばんやさしいHTML5&CSS3の教本 人気講師が教える本格Webサイトの書き方 (「いちばんやさしい教本」シリーズ)

  • 作者: 赤間 公太郎
  • 出版社/メーカー: インプレス
  • 発売日: 2016/03/18
  • メディア: 単行本(ソフトカバー)



How Google Works

How Google Works

  • 作者: Eric, III Schmidt
  • 出版社/メーカー: John Murray Publishers Ltd
  • 発売日: 2015/03/12
  • メディア: ペーパーバック




nice!(44)  コメント(0)  トラックバック(0) 

nice! 44

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0