Bloggerでプログラミングを綺麗に表示する「SyntaxHighlighter」

by Unknown 7:56 0 コメント




初投稿!!ということで色々分からないことだらけなのですが、書いていこうと思います。
このブログは、私がプログラミングを勉強していく上でのノートとして活用していきたいと思います。また私はつい最近勉強を始めたばかりの、初心者です。あまりいい知識は提供できないので、あまり期待しないでください。



早速ですが、今日はブログにプログラムを綺麗に表示する方法をノートしていきたいと思います。プログラミングを勉強したことがある方は見たことがあるかと思いますが、ブログなどでソースコードを載せる際、ソースコードの部分が枠で囲ってあって、色がついてて、という風にとても、かっこよく載せてありますよね。私もこの記事を書く際どうやるんだろと思い少し調べて見たところ、どうやら”SyntaxHighlighter”というJavaScriptライブラリを皆さん使っているようです。それを導入してみたのでその導入方法と、使い方についてメモしていきます。



導入方法

準備はたったの1つだけです。まず　①Bloggerの管理者画面左の項目から「テンプレート」を選択します。次に　②「HTMLの編集を選択します。



次に、エディタ書かれているhtml内の<head>と</head>の間に次のコードをコピペしてください。
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>


 


以上で準備は完了です。次は使い方について見て行きましょう。

使い方

コードを投稿する際

"プログラムを記述"

のように記述します。また***のところは言語名を書きます。例えばJAVA言語を載せたい場合は***の部分を”java”にします。使用できる言語は下記のリンクより参照してください。





ラベル:

About author: Unknown

生まれは沖縄県石垣島、現在は大学で情報工学を学ぶ学生です。未熟者ですがどうぞ宜しく

0 コメント:

登録: コメントの投稿 (Atom)