ソースコードを読みやすく表示する方法

ホーム > ブログカスタマイズ > プラグイン > ソースコードを読みやすく表示する方法

ソースコードを読みやすく表示する方法

2014.09.09

HTMLやCSSなど、色んな言語のソースコードを、サイト上で読みやすく表示してくれる「SyntaxHighlighter」(シンタックスハイライター)というツールを見つけたので導入してみた♪
「SyntaxHighlighter」は、対応言語がとても多く、HTML・XHTML・XML、CSS、JavaScriptの他にもPHP、C++、C#、Java、Visual Basic、Perl、Ruby、Python、Bash、PowerShell、SQL等とにかく色んなソースの表示に対応しています。

「SyntaxHighlighter」導入手順

1.ファイルをダウンロードする

「SyntaxHighlighter」のダウンロードページは こちら
http://alexgorbatchev.com/SyntaxHighlighter/download/

ページ内の“Click here to download”の部分をクリックすると
「syntaxhighlighter_3.0.83.zip」がダウンロードされるのでそれを展開（解凍）する。（3.0.83の部分は現在のバージョン）

ツール自体はJavaScriptとCSSで構成されており、下記のように行番号と文字や背景に装飾を付けて、
ソースを見やすく表示出来る。またソース部分をダブルクリックするとソースだけを全選択してる状態になるのでコピペがやり易い。（デザインは8種類用意されてて、自分でも自由に編集可能）

<table width="300" height="80" cellspacing="1" cellpadding="5" bgcolor="#ccc">
<caption>表のタイトル</caption>　
<tr bgcolor="#ffffff">
<td>左のセルの内容</td>　
<td>真ん中のセルの内容</td>
<td>右のセルの内容</td>　
</tr>
</table>

このページのトップへ

2.ファイルを選んでアップロード

展開したフォルダの中身　　　

ダウンロードしたファイルを展開（解凍）すると８つのファイルがあり、その中で使うのは「scripts」と「styles」の２つのフォルダ

通常は、この２つのフォルダをそのままサイトにアップロードでもOK

ですが、今回はFC2ブログへのアップロードなので、このフォルダの中から必要なファイルだけを選んでアップロードします。

「scripts」フォルダの中身　　

まず「scripts」フォルダには対応言語ごとにjsファイルがあるので、その中から自分がソースの表示で使いたい言語のファイルを選びアップロードします。※「shCore.js」は必須です。

例えば、HTMLとCSSとJavaScriptのソース表示に使う場合は必須の「shCore.js」の他に「shBrushXml.js」、「shBrushCss.js」、「shBrushJScript.js」の合計４つをアップロード。

※詳しくは下記の「対応言語一覧」を参照

「styles」フォルダの中身　　　

次に「styles」フォルダの中から使用するテーマに合わせてcssファイルを選び、アップロードします。

■cssファイルの “shTheme○○○” と “shCore○○○” の違い
「shCore.css」は構造部分（各箇所の位置や大きさ、余白等）を指定してるファイル。（装飾は無し）

「shTheme○○○.css」はテーマ別の装飾を指定してるファイルで、コアになる「shCore.css」と組み合わせて使う。（この場合「shCore.css」＋「shTheme○○○.css」の２つを選び、両方をアップロード）
また「shCore○○○.css」は上記の「shCore.css」とテーマ別の「shTheme○○○.css」が一体化したファイルなので、こちらを使う場合は１つのファイルをアップロードでOK。

例えば、「shCore.css」＋「shThemeDefault.css」と「shCoreDefault.css」は同じ見た目です。
（cssファイルは自身で編集してカスタマイズする事も可能）

■対応言語一覧

対応言語	ファイル名
AppleScript	shBrushAppleScript.js
ActionScript3	shBrushAS3.js
Bash/shell	shBrushBash.js
ColdFusion	shBrushColdFusion.js
C++	shBrushCpp.js
C#	shBrushCSharp.js
CSS	shBrushCss.js
Delphi	shBrushDelphi.js
Diff	shBrushDiff.js
Erlang	shBrushErlang.js
Groovy	shBrushGroovy.js
Java	shBrushJava.js
JavaFX	shBrushJavaFX.js

対応言語	ファイル名
JavaScript	shBrushJScript.js
Perl	shBrushPerl.js
PHP	shBrushPhp.js
Plain Text	shBrushPlain.js
PowerShell	shBrushPowerShell.js
Python	shBrushPython.js
Ruby	shBrushRuby.js
Sass（SCSS）	shBrushSass.js
Scala	shBrushScala.js
SQL	shBrushSql.js
Visual Basic	shBrushVb.js
XML・HTML XHTML・XSLT	shBrushXml.js

このページのトップへ

3.ファイルを読み込む為の記述

必要なファイルをアップロードしたら、次は「SyntaxHighlighter」を構成するファイルを読み込むよう
HTMLのhead要素内（<head> ～ </head>の間）に以下の記述をする。

1.コアスクリプトファイル「shCore.js」を読み込む記述
2.表示したい言語に応じたjsファイル（shBrush○○○.js）を読み込む記述
3.表示に使いたいテーマのcssファイル（sh○○○.css）を読み込む記述
4.スクリプトを開始する記述

■以下は例としてHTML・CSS・JavaScriptのソース表示を行う場合です。

<head>
<script src="http://～/shCore.js"></script>　<!-- コアスクリプト -->
<script src="http://～/shBrushXml.js"></script>　<!-- HTML用 -->
<script src="http://～/shBrushCss.js"></script>　<!-- CSS用 -->
<script src="http://～/shBrushJScript.js"></script>　<!-- JavaScript用 -->
<link rel="stylesheet" href="http://～/sh○○○.css">　<!-- 使用するテーマのCSS -->
<script>
SyntaxHighlighter.config.bloggerMode = true;　<!-- ブログの自動改行用 -->
SyntaxHighlighter.all();　<!-- スクリプトを開始する記述 -->
</script>
</head>

※http://～の部分を省略してます。（FC2ブログの場合は絶対パスで記述）
※FC2ブログで自動改行を使う場合、「SyntaxHighlighter.config.bloggerMode = true;」と記述しないとうまく表示出来ないみたいです。しかし、この設定をした場合ソース表示で<br/>タグが使えなくなるので、<br/>タグを表示したい場合はこの設定を外しておく。（上記は例として記述してます）

■「SyntaxHighlighter」のオートローダー(shAutoloader.js)を使う場合
Autoloaderファイルを利用すると、ソースコード別のjsファイルを必要となった時点で読み込む為
余計な読み込みが不要になる分、動作が軽くなるようです。（多くの言語に対応させたい場合に合理的）

その場合のhead要素内への記述例

1.コアスクリプトファイル「shCore.js」を読み込む記述
2.オートローダーファイル「shAutoloader.js」を読み込む記述
3.表示に使いたいテーマのcssファイル（sh○○○.css）を読み込む記述

<head>
<script src="http://～/shCore.js"></script>　<!-- コアスクリプト -->
<script src="http://～/shAutoloader.js"></script>　<!-- オートローダー -->
<link rel="stylesheet" href="http://～/sh○○○.css">　<!-- 使用するテーマのCSS -->
</head>

※「shAutoloader.js」もアップロードしておく必要がある。

次に、表示したいページのbody要素（<body>）の最後に必要なスクリプトを記述する
Autoloaderは、使用する箇所が全て読み込まれないと言語を判別できないため<body>の一番最後に記述

<script>
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"
);
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.all();
</script>
</body>

※さっきhead要素に記述してた「SyntaxHighlighter.all();」を今度はbody要素に記述する。
※「SyntaxHighlighter.defaults['toolbar'] = false;」はコード右上に出る「？」を非表示にしてます。

このページのトップへ

4.pre要素を使ってソースを表示

「SyntaxHighlighter」を使ってソースを表示するには、以下のようにpre要素を使ってclass属性で
「class="brush: (ブラシ名);"」と記述します。（下記のブラシ名一覧を参照）

例えばHTMLの場合、下記のように指定します。

<pre class="brush: html;" title="任意でタイトルを入れます">
　&lt;div id="header"&gt;
　　表示したいHTMLソース
　&lt;/div&gt;
</pre>

※pre要素のclass属性値に「brush: html」と記述し、ソース中で使われる「<」記号や「>」記号は、
それぞれ「<」・「>」と記述する。

上記のソースをコピペして張り付けると、↓の表示になります。

　<div id="header">
　　表示したいHTMLソース
　</div>

■ブラシ名一覧（複数ある物は「,」で区切ってあるので、どれか１つを選びます。）

対応言語	ブラシ名	ファイル名
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

このページのトップへ

5.オプション機能の使い方

5-1.タイトルを付ける

ソースコードを表示する<pre>要素にタイトルを付けて、分かり易く出来ます。
title="タイトル名"

<pre class="brush: html;" title="タイトルを付けるとここに表示されます">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

5-2.ブログの自動改行機能使用時

FC2ブログで自動改行を使う場合、head要素に「SyntaxHighlighter.config.bloggerMode = true;」と
記述しないとうまく表示出来ないみたいです。しかし、この設定をした場合ソース表示で<br/>タグが使えなくなるので、<br/>タグを表示したい場合はこの設定を外しておく。
（オートローダーを使う場合はbody要素に記述する）

<script>
SyntaxHighlighter.config.bloggerMode = true;　<!-- ブログの自動改行用 -->
SyntaxHighlighter.all();　<!-- スクリプトを開始する記述 -->
</script>

※デフォルトでは「SyntaxHighlighter.config.bloggerMode = false;」

5-3.ソース内のリンクを解除する

ソース内にURLを記述した場合、デフォルトだと自動でリンクが貼られますが、
このリンクを解除する場合は「auto-links:false」を付け加えます。（デフォルトは「true」）

<pre class="brush: html;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

<pre class="brush: html auto-links:false;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['auto-links'] = false;

5-4.class属性を個別に設定して、特定の<pre>要素だけ装飾を変更

ページ全体に適用してるCSSのテーマとは別に、個別に<pre>要素の装飾を変更する事が可能

<style>
.pre-alter {
  background-color: #F0FFF0 !important;
  border: 2px #ada solid;
}
.pre-alter .line.alt1 {
  background-color: #F7FFF7 !important;
}
.pre-alter .line.alt2 {
  background-color: #fff !important;
}
.pre-alter .line.highlighted.alt1, 
.pre-alter .line.highlighted.alt2 {
  background-color: #cfc !important;
}
.pre-alter .string, .pre-alter .string a {
  color: #333399 !important;
}
.pre-alter .gutter  {
  color: #666 !important;
}
.pre-alter .gutter .line { 
  border-right: 2px solid #9a9 !important;
}
.pre-alter .gutter .line.highlighted { 
  background-color: #393 !important;
  color: white !important;
  font-weight:bold !important;
}
</style>

<pre class="brush: html; class-name: 'pre-alter'">　
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

※上記では新たに「pre-alter」と言うクラス名を作り、styleで指定した内容を個別に適用してます。
このstyleの内容をここでは、HTML内に直接<style> ～ </style>で囲って記述してますが、
通常は、すでに読み込んである「SyntaxHighlighter」の「sh○○○.css」に書き足すか、
新たにcssファイルを作って読み込ませても良い。但し、CSSは後に読み込まれた方が適用されるので
新たに追加したcssファイルは、head要素内で「sh○○○.css」の後に記述する。

<head>
<script src="http://～/shCore.js"></script>　<!-- コアスクリプト -->
<script src="http://～/shBrushXml.js"></script>　<!-- HTML用 -->
<script src="http://～/shBrushCss.js"></script>　<!-- CSS用 -->
<script src="http://～/shBrushJScript.js"></script>　<!-- JavaScript用 -->
<link rel="stylesheet" href="http://～/sh○○○.css">　<!--使用するテーマのCSS-->
<link rel="stylesheet" href="http://～/○○○.css">　<!--追加したオリジナルのCSS-->
<script>
SyntaxHighlighter.all();　<!-- スクリプトを開始する記述 -->
</script>
</head>

5-5.ソースコードを折りたたみ、クリックで開くようにする

初期状態ではソースコードが折りたたんであり、クリックすると開いてソースコードが表示される。
デフォルトは「false」で、「true」に設定すると折りたたみます。

↓こんな感じです。

<pre class="brush: html collapse:true;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['collapse'] = true;

5-6.開始行の番号を変更する

ソースコードを表示した際の開始行の番号を任意の数字に変更出来る。

<pre class="brush: html first-line:77;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['first-line'] = 77;

5-7.行番号を表示しない

行番号の表示・非表示を切り替える。デフォルトは「true」で、「false」で非表示になります。

<pre class="brush: html gutter:false;">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

SyntaxHighlighter.defaults['gutter'] = false;

5-8.特定の行をハイライトして強調

特定の行の色を変更して、目立つように強調出来ます。
highlight:[1, 2, 3]のように配列で指定し、1行だけ指定する時はその行番号を指定する。

<pre class="brush:html highlight:[6,7,9]" title="6行目、7行目、9行目をハイライト">
<head>
<script src="http://～/shCore.js"></script>　<!-- コアスクリプト -->
<script src="http://～/shBrushXml.js"></script>　<!-- HTML用 -->
<script src="http://～/shBrushCss.js"></script>　<!-- CSS用 -->
<script src="http://～/shBrushJScript.js"></script>　<!-- JavaScript用 -->
<link rel="stylesheet" href="http://～/sh○○○.css">　<!--使用するテーマのCSS-->
<link rel="stylesheet" href="http://～/○○○.css">　<!--追加したオリジナルのCSS-->
<script>
SyntaxHighlighter.all();　<!-- スクリプトを開始する記述 -->
</script>
</head>
</pre>

SyntaxHighlighter.defaults['highlight'] = [1,2,3];

5-9.他言語とHTMLが混在してる時に見やすくする

他言語とHTMLが混在するソースコードを表示する際に、両方を色分けをして見やすく出来る。
※利用するには事前に「shBrushXml.js」を読み込ませる必要があります。
デフォルトは「false」で、「true」に設定すると両方の言語が色分けされます。

下記は、JavaScriptとHTMLの例

<pre class="brush:js html-script:true">
<script>　/* JavaScriptのソース */
function ShowNowYear() {
var now = new Date();
var year = now.getFullYear();
document.write(year);
}
</script>

<div class="header">　<!-- HTMLのソース -->
<span>
<p align="left">JavaScriptとHTMLのソースが混在</p>
</span>
</div>
<pre>

<pre class="brush:js">
<script>　/* JavaScriptのソース */
function ShowNowYear() {
var now = new Date();
var year = now.getFullYear();
document.write(year);
}
</script>

<div class="header">　<!-- HTMLのソース -->
<span>
<p align="left">JavaScriptとHTMLのソースが混在</p>
</span>
</div>
<pre>

※ソースコードが少ないので変化が微妙ですが、こっちはHTML部分に色が付いて無いです。

SyntaxHighlighter.defaults['html-script'] = true;

5-10.タブサイズを変更、修正する

タブで空くスペースの間隔を指定出来ます。デフォルトの初期値は「tab-size: 4」
「tab-size: 4」＝タブ１つ分のスペースで半角スペース4つ分になります。

<pre class="brush: html; tab-size: 4" title="「tab-size: 4（デフォルト）」">
<table>
	<tr>
		<td>あああ</td>
		<td>いいい</td>
	</tr>
</table>
</pre>

<pre class="brush: html; tab-size: 8" title="「tab-size: 8」">
<table>
	<tr>
		<td>あああ</td>
		<td>いいい</td>
	</tr>
</table>
</pre>

SyntaxHighlighter.defaults['tab-size'] = 4;

5-11.ツールバーの表示・非表示

ツールバーとは<pre>の右上に表示される小さな「？」の部分です。
初期値は「true」で表示となり、非表示にする場合は「false」にします。

<pre class="brush: html; toolbar:false">
<a href="http://interest2014.blog.fc2.com/">私のブログ</a>
</pre>

※このブログではツールバーの部分を背景と同色にして見えないようにしてますが、表示はしてますのでソースコードが表示されてる右上にマウスを置くと分かります。（このサンプルでは非表示にしてます）

SyntaxHighlighter.defaults['toolbar'] = false;

このページのトップへ

6.CSSのサンプルと編集方法

以下はテーマ別CSSのサンプルです。
「shCore○○○.css」もしくは、「shTheme○○○.css」の○○○の部分がテーマ名

「Default」	「Django」	「Eclipse」	「Emacs」
「FadeToGrey」	「MDUltra」	「Midnight」	「RDark」

■CSSの編集について
オリジナルのデザインにする為にCSSを編集する場合は、まずベースとするテーマを決めて
そのテーマのcssファイルをコピーし、リネームすると楽です。
また、配色のみ変更するなら「shCore.css」＋「shTheme○○○.css」の組み合わせで、
「shTheme○○○.css」のファイルを修正すると変更箇所が分かり易い。
構造的な部分も編集するなら、一体化してる「shCore○○○.css」のファイルを編集する。

ブログランキングに参加中♪
良かったらポチっとお願いします

この記事にトラックバックする(FC2ブログユーザー) トラックバックって何！？って場合はこちら: http://interest2014.blog.fc2.com/tb.php/7-eccef9e6

「ソースコードを読みやすく表示する方法」へのトラックバック

- TrackBack -

「ソースコードを読みやすく表示する方法」へのコメント

- Comment -

こんな良い物が・・・

先日私もブログのカスタマイズの手順を書いていたら
HTMLのコードをブログで表示するのに、ブログはHTMLのコドーだと思い表示してくれないし・・・
どうやって、これが表示される文字とブログに認識させたら良いのだろうか？？？と
考えて、あると♪さんのブログに来て、ブログの文字として表示されているソースコードをセレクトして
マウスの右ボタンを押して”選択したソースを表示”からソースをみて・・・
この”CODE"ってコマンドが表示してくれんのか？って・・・
こんな良い物あったんですね。今度からこれ使います。
ありがとうございます。

2014-11-24 16:47
girigiri26さん@管理人
編集

Re: こんな良い物が・・・

> girigiri26さん

ソースコードをブログで表示したい場合、これがあると便利ですよ♪
あと配色などもCSSを編集する事で自由に出来るので
ブログのデザインに合わせて変える事も可能です♪ｄ(≧∀≦)ｂ

2014-11-24 19:20
あると♪さん@管理人
編集

No title

一週間前にgirigiri26さんも同じこと考えてたんだって笑ってしまいました(^o^)
記事内容に頭がついて行けず。。。毎日1回ずつ読んだら意味がわかってくるかも(-｡-; 明日もう一度読みに来ます(^o^)

2014-12-03 18:32
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

確かに同じようなタイミングですねｗｗd(*￣∇￣)

またこの記事は結構内容が長いので難しく感じるかもですが...
やってみれば案外いけると思いますｗ　きっとｗｗ

2014-12-03 19:25
あると♪さん@管理人
編集

コメントの投稿

- Post a Comment -

▼クリックすると配色が変更されます　
このボタンの設置方法はこちら♪

White

Black

プロフィールClick

Author：あると♪
ブログ開始：日目
公開記事数：件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【当ブログのご案内は こちら♪ 】

カテゴリClick

つぶやき(12)

ブログカスタマイズ(45)

テスト的な感じ(1)

テスト的な感じ2(0)
のカテゴリをクリックでツリー表示します

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

いつもチェックしてるブログ＆便利なツールやサービス

- Link -

Font Awesome
便利なアイコン型Webフォント
ブログ内の参考記事はこちら
Stripe Generator
色んなストライプ柄を簡単作成
ブログ内の参考記事はこちら
Gyazo
スクリーンショットを簡単に共有
ブログ内の参考記事はこちら
0to255
指定した色のグラデーションを表示
Ultimate CSS Gradient Generator
CSSのグラデーションを簡単作成
Css Text Shadow
text-shadowを使って文字を装飾

INTEREST

ソースコードを読みやすく表示する方法

「SyntaxHighlighter」導入手順

1.ファイルをダウンロードする

2.ファイルを選んでアップロード

3.ファイルを読み込む為の記述

4.pre要素を使ってソースを表示

5.オプション機能の使い方

5-1.タイトルを付ける

5-2.ブログの自動改行機能使用時

5-3.ソース内のリンクを解除する

5-4.class属性を個別に設定して、特定の<pre>要素だけ装飾を変更

5-5.ソースコードを折りたたみ、クリックで開くようにする

5-6.開始行の番号を変更する

5-7.行番号を表示しない

5-8.特定の行をハイライトして強調

5-9.他言語とHTMLが混在してる時に見やすくする

5-10.タブサイズを変更、修正する

5-11.ツールバーの表示・非表示

6.CSSのサンプルと編集方法

「ソースコードを読みやすく表示する方法」へのトラックバック

「ソースコードを読みやすく表示する方法」へのコメント

こんな良い物が・・・

Re: こんな良い物が・・・

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ＆便利なツールやサービス

INTEREST

ソースコードを読みやすく表示する方法

「SyntaxHighlighter」導入手順

1.ファイルをダウンロードする

2.ファイルを選んでアップロード

3.ファイルを読み込む為の記述

4.pre要素を使ってソースを表示

5.オプション機能の使い方

5-1.タイトルを付ける

5-2.ブログの自動改行機能使用時

5-3.ソース内のリンクを解除する

5-4.class属性を個別に設定して、特定の<pre>要素だけ装飾を変更

5-5.ソースコードを折りたたみ、クリックで開くようにする

5-6.開始行の番号を変更する

5-7.行番号を表示しない

5-8.特定の行をハイライトして強調

5-9.他言語とHTMLが混在してる時に見やすくする

5-10.タブサイズを変更、修正する

5-11.ツールバーの表示・非表示

6.CSSのサンプルと編集方法

「ソースコードを読みやすく表示する方法」へのトラックバック

「ソースコードを読みやすく表示する方法」へのコメント

こんな良い物が・・・

Re: こんな良い物が・・・

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ ＆ 便利なツールやサービス

いつもチェックしてるブログ＆便利なツールやサービス