2013/09/09
google-code-prettifyを導入し、ブログにプログラム（ソースコード）を載せる
こんにちは、naouniverse( @naouniverse708 )です。
先日の記事、
Quick Highlighterを利用し、ブログにプログラム（ソースコード）を載せる
にて、ブログにプログラム（ソースコード）を載せる方法を試しましたが、スマホでの表示がどうもうまくいってないっぽいので、今回google-code-prettifyを試すことにしました。
<head>タグ内に以下を挿入しました。
<link rel="stylesheet" href="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>
<script type="text/javascript" src="https://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と比べると、個人的には及第点だと思います。
