FC2ブログ

Ctrl + Z

人生をUndoしよう

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
04


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SyntaxHighlighterの使い方編

前回に引き続き、SyntaxHighlighterに関して取り上げていきます。

前回は、「FC2ブログにSyntaxHighlighterを導入する方法」と題しまして、セットアップまでを行いました。

今日は具体的な使い方を、まとめて行きます。


まずは、基本的な使い方です。

<pre class="brush: python">with open('test.txt', 'r') as fp:
for line in fp: #ファイル読み込み
print(line) #標準出力</pre>

with open('test.txt', 'r') as fp:
for line in fp: #ファイル読み込み
print(line) #標準出力


使い方はさほど難しくありません。
1行目と5行目のように、表示したいプログラムを、<pre class="">~</pre> で囲います。
classの中身は、brush:言語の種類; という書き方をします。


言語の種類ですが、前回、autoloaderの設定で、以下の中から、使いたいものをピックアップして書きました。
ここで書いた、前の部分、例えば、Delphiのプログラムの場合"delphi"または"pascal"と書くことで、その言語が<pre>の中に、書かれていると判別され、それに合わせた表記をしてくれます。

SyntaxHighlighter.autoloader(
'applescript http://ほげほげ/shBrushAppleScript.js',
'actionscript3 as3 http://ほげほげ/shBrushAS3.js',
'bash shell http://ほげほげ/shBrushBash.js',
'coldfusion cf http://ほげほげ/shBrushColdFusion.js',
'cpp c http://ほげほげ/shBrushCpp.js',
'c# c-sharp csharp http://ほげほげ/shBrushCSharp.js',
'css http://ほげほげ/shBrushCss.js',
'delphi pascal http://ほげほげ/shBrushDelphi.js',
'diff patch pas http://ほげほげ/shBrushDiff.js',
'erl erlang http://ほげほげ/shBrushErlang.js',
'groovy http://ほげほげ/shBrushGroovy.js',
'java http://ほげほげ/shBrushJava.js',
'jfx javafx http://ほげほげ/shBrushJavaFX.js',
'js jscript javascript http://ほげほげ/shBrushJScript.js',
'perl pl http://ほげほげ/shBrushPerl.js',
'php http://ほげほげ/shBrushPhp.js',
'text plain http://ほげほげ/shBrushPlain.js',
'py python http://ほげほげ/shBrushPython.js',
'ruby rails ror rb http://ほげほげ/shBrushRuby.js',
'sass scss http://ほげほげ/shBrushSass.js',
'scala http://ほげほげ/shBrushScala.js',
'sql http://ほげほげ/shBrushSql.js',
'vb vbnet http://ほげほげ/shBrushVb.js',
'xml xhtml xslt html http://ほげほげ/shBrushXml.js'
);



では、一度、試しにプログラミングを表示してみてください。
この時点で、表示がうまくいかない場合は、設定、または、アップロードするファイルが間違っている可能性があります。

しつこいようですが、.jsファイルは、必ず、scriptsフォルダにあるファイルを使用してください。srcフォルダにあるファイルは使ってはいけません。

一度間違い、再アップロードした後でも、上手く表示されない場合があります。たぶん、ブラウザのキャッシュに残っているのだと思います。一度キャッシュクリアを試してみてください。


その他、細かい点ですが、


<pre class="brush: python">
with open('test.txt', 'r') as fp:
for line in fp: #ファイル読み込み
print(line) #標準出力</pre>

こうかくと、

with open('test.txt', 'r') as fp:
for line in fp: #ファイル読み込み
print(line) #標準出力

こんな風に書くと、1行多く出てしまいます。preタグから、改行せずに、ソースコードをはじめましょう。(FC2だけなのか、それ以外もなのかは不明)






注意点

ブログにソースコードを載せる場合、問題となるのが、「<」「>」「&」の文字です。不等号や論理演算、ポインタなどで、これらの文字を使用しますが、このまま使ってしまうと、htmlタグとして認識され、正しくページが表示されなくなります。

そのため、
'&' は、'&amp;'
'<' は、'&lt;
'>' は、'&gt;'
に変換する必要があります。

手前味噌ではありますが、Py習 特殊文字置換(HTML用) http://pyshu.blog111.fc2.com/blog-entry-63.htmlにて、変換ツールを公開しています。Python使いで、Windows派な方は、使ってみてください。







SyntaxHighlighterには、いくつかのオプションがあります。よく使うやつを試してみます。


title (プログラムにタイトルをつける)

タイトルをつけるには、
<pre class="brush:html" title="タイトルを書く">
という風に書きます。
<pre class="brush:python;" title="お好きなタイトルをどうぞ">from collections import OrderedDict
txt = "Tom&amp;Jerry"
d = OrderedDict([
('&amp;','&amp;amp;'),('\"', "\'"),
('&lt;','&amp;lt;'), ('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = "Tom&Jerry"
d = OrderedDict([
('&','&amp;'),('\"', "\'"),
('<','&lt;'), ('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])









highlight (指定行の強調)

「brush:言語;」の後に、「highlight:[行番号,行番号,行番号];」と書きます。
<pre class="brush:python; highlight:[3,6]">from collections import OrderedDict
txt = 'Tom&amp;Jerry'
d = OrderedDict([
('&amp;','&amp;amp;'),
('&lt;','&amp;lt;'),
('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = 'Tom&Jerry'
d = OrderedDict([
('&','&amp;'),
('<','&lt;'),
('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])







first-line (開始行の指定)

「brush:言語;」の後に、「first-line:開始行番号;」と書きます。
<pre class="brush:python; first-line:53">from collections import OrderedDict
txt = 'Tom&amp;Jerry'
d = OrderedDict([
('&amp;','&amp;amp;'),
('&lt;','&amp;lt;'),
('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = 'Tom&Jerry'
d = OrderedDict([
('&','&amp;'),
('<','&lt;'),
('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])


highlightオプションと組み合わせる場合は、
<pre class="brush:python; first-line:53 highlight:[55,58]">from collections import OrderedDict
txt = 'Tom&amp;Jerry'
d = OrderedDict([
('&amp;','&amp;amp;'),
('&lt;','&amp;lt;'),
('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = 'Tom&Jerry'
d = OrderedDict([
('&','&amp;'),
('<','&lt;'),
('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])









gutter (行番号のON,OFF)

「brush:言語;」の後に、「gutter:true or false;」と書きます。
gutterオプションをつけない場合はtrueとなり、「gutter:false」で行番号がOFFになります。
<pre class="brush:python; gutter:false;">from collections import OrderedDict
txt = "Tom&amp;Jerry"
d = OrderedDict([
('&amp;','&amp;amp;'),
('&lt;','&amp;lt;'),
('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = "Tom&Jerry"
d = OrderedDict([
('&','&amp;'),
('<','&lt;'),
('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])









collapse (プログラムを折りたたんだ状態にする)

「brush:言語;」の後に、「collapse:true or false;」と書きます。
collapseオプションをつけない場合はfalseとなり、「collapse:true」で折りたたんだ状態になります。
<pre class="brush:python; collapse:true;">from collections import OrderedDict
txt = "Tom&amp;Jerry"
d = OrderedDict([
('&amp;','&amp;amp;'),('\"', "\'"),
('&lt;','&amp;lt;'), ('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = "Tom&Jerry"
d = OrderedDict([
('&','&amp;'),('\"', "\'"),
('<','&lt;'), ('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])










toolbar (右上の[?]を消す)

「brush:言語;」の後に、「toolbar:true or false;」と書きます。
toolbarオプションをつけない場合はtrueとなり、「toolbar:false」で右上の[?]が消えます。
<pre class="brush:python; toolbar:false;">from collections import OrderedDict
txt = "Tom&amp;Jerry"
d = OrderedDict([
('&amp;','&amp;amp;'),('\"', "\'"),
('&lt;','&amp;lt;'), ('&gt;','&amp;gt;')])
for key in d:
txt = txt.replace(key,d[key])</pre>

from collections import OrderedDict
txt = "Tom&Jerry"
d = OrderedDict([
('&','&amp;'),('\"', "\'"),
('<','&lt;'), ('>','&gt;')])
for key in d:
txt = txt.replace(key,d[key])








その他、テストは省略
auto-links : デフォルトtrue : プログラム中のURLをリンクにする。
class-name : CSSの独自のクラスを指定。ココのサイトが詳しい。
html-script : デフォルトtrue : html/XMLとスクリプトが混ざっても、ハイライト。ただし、使用できるBrushが限られている。
smart-tabs : デフォルトtrue : 賢いらしい。
tab-size : デフォルト4 : タブのサイズを変更する。



以上。快適なブログライフを。














スポンサーサイト


Comments

Leave a Comment


Body

プロフィール

Green

Author:Green
思ったこと、興味があることなどを適当に。
プログラミングとゲームの話が多いかも。

主に使ってるプログラミング言語
・C++
・C#
・Visual Basic
・Python

email address

最新コメント
最新トラックバック
月別アーカイブ
 
 
 
 
 
リンク (ゲーム)
 
 
Amazon
ゲーム

[2012/05/24] ドラゴンズドグマ(数量限定特典『バイオハザード6』体験版用DLコード同梱)  
  [2012/07/05] 世界樹の迷宮IV 伝承の巨神 (特典 ブックレット付きサウンドトラックCD付き)  
  [2012/07/19] ルーンファクトリー4 (特典 こっそり聴きたい添い寝CD(特製ヘッドフォン付き)付き)  
  [2012/08/02] ドラゴンクエストX 目覚めし五つの種族 オンライン(通常版)
[2012/08/02] ドラゴンクエストX 目覚めし五つの種族 オンライン (Wii USBメモリー16GB同梱版)  
  [2012/08/30] 初音ミク -Project DIVA- f(予約特典:デザイン保護フィルム(PlayStation(R)Vita専用)付き)  
 



DVD / Blu-ray

[2012/07/18] 映画けいおん! (Blu-ray 初回限定版)

[2012/08/29] [初音ミク]ミクの日大感謝祭 2DaysコンプリートBOX(初回受注生産限定盤) [Blu-ray]
 
 
Amazon
 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。