google-code-prettifyを導入し、ブログにプログラム(ソースコード)を載せる

google-code-prettifyを導入し、ブログにプログラム(ソースコード)を載せる

こんにちは、naouniverse( @naouniverse708 )です。

先日の記事、

Quick Highlighterを利用し、ブログにプログラム(ソースコード)を載せる

にて、ブログにプログラム(ソースコード)を載せる方法を試しましたが、スマホでの表示がどうもうまくいってないっぽいので、今回google-code-prettifyを試すことにしました。

via:[JavaScript] google-code-prettify でのソースコードのハイライト表示についてまとめてみた | しゃけろぐ

<head>タグ内に以下を挿入しました。

<link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   prettyPrint();
});
</script>
<style type="text/css">
pre.prettyprint {
background-color: rgb(248, 248, 248);
color: gray;
padding: 0 0 0 3px;
}
ol.linenums li {
list-style: decimal outside;
line-height: 1.5;
border-left: solid 3px #6CE26C;
padding-left: 3px;
margin-left: .7em;
background-color: rgb(248, 248, 248);
}
</style>

で、記事内にコードを、

<pre class="prettyprint linenums">#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    NSLog(@"Hello World!");
}
@end
</pre>

な感じで記入すると、

#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad
{
    [super viewDidLoad];
    NSLog(@"Hello World!");
}
@end

という感じで表示されます。

スマホでの表示も改良の余地はありますが、以前のQuick Highlighterと比べると、個人的には及第点だと思います。

  • このエントリーをはてなブックマークに追加

『naouniverse.com』では、管理人が気になるモノ・コト・セカイについて、つらつらと書いています。
ガジェット・カメラ・デザイン・プログラミング・L'Arc~en~Cielなどなど・・・