★ ソースコードをブログなどに貼る SyntaxHighlighter
● 内容
① SyntaxHighlighterは下記を参照
http://alexgorbatchev.com/SyntaxHighlighter/
② ダウンロードは下記から行えます（現在のバージョンは 3.0.83）
http://alexgorbatchev.com/SyntaxHighlighter/download/
Click here to download. をクリックするとダウンロードできます。
③ syntaxhighlighter_3.0.83.zipがダウンロードされるので解凍してください。
④ 解凍したら解凍したフォルダーを全部、アメブロが読み込める
場所に格納します。
Dropboxの様なオンラインストレージサービスを利用してもＯＫ。
Dropboxの利用は下記を参照
http://ameblo.jp/new-blue-777/entry-11572724517.html
⑤ プラグインへの設定方法(shAutoloader.js を利用した方法)
（④で入れたDropboxのＵＲＬは変えてください）
http://alexgorbatchev.com/SyntaxHighlighter/manual/api/autoloader.html
<script src="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/shCore.js" type="text/javascript"></script>
<script src="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/shAutoloader.js" type="text/javascript"></script>
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCore.css" type="text/css">
<script type="text/javascript">
SyntaxHighlighter.autoloader(
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/'));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
'applescript @shBrushAppleScript.js',
'actionscript3 as3 @shBrushAS3.js',
'bash shell @shBrushBash.js',
'coldfusion cf @shBrushColdFusion.js',
'cpp c @shBrushCpp.js',
'c# c-sharp csharp @shBrushCSharp.js',
'css @shBrushCss.js',
'delphi pascal @shBrushDelphi.js',
'diff patch pas @shBrushDiff.js',
'erl erlang @shBrushErlang.js',
'groovy @shBrushGroovy.js',
'java @shBrushJava.js',
'jfx javafx @shBrushJavaFX.js',
'js jscript javascript @shBrushJScript.js',
'perl pl @shBrushPerl.js',
'php @shBrushPhp.js',
'text plain @shBrushPlain.js',
'py python @shBrushPython.js',
'ruby rails ror rb @shBrushRuby.js',
'sass scss @shBrushSass.js',
'scala @shBrushScala.js',
'sql @shBrushSql.js',
'vb vbnet @shBrushVb.js',
'xml xhtml xslt html @shBrushXml.js'
));
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.config.stripBrs=true;
SyntaxHighlighter.all();
</script>
● SyntaxHighlighter.defaults['toolbar'] = false; は？のツールバーを
表示しない場合に使います。
ここで指定しない場合は、記事の<pre>タグのclassでも指定ができます。
？をクリックすると下記がポップアップされます。
● SyntaxHighlighter.config.stripBrs=true; は、<br>を取り除きます。
アメブロなどブログで使う場合は、この指定が必要です。
http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/
また <pre>のタグを使いたくないという場合は下記を追加でセットします。
（<div>がいいという場合は下記）
SyntaxHighlighter.config.tagName="div";
● その他
・ 行番号を表示させない。
・ 最初の行を１からではなく指定した行番号から始めさせる。
・ 指定した行番号の番号部分を強調表示する。
・ タブ(TAB)を利用した場合は、TABのカラムを変更できます。（初期値は4)
⑥ 簡単な方法（ＣＳＳのソースコードしかブログで紹介しない場合）
(shAutoloader.js を利用した方法)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeDefault.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCore.css" type="text/css">
<script src="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/shCore.js" type="text/javascript"></script>
<script src="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/shAutoloader.js" type="text/javascript"></script>
<script type="text/javascript">
SyntaxHighlighter.autoloader(
'css ④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/scripts/shBrushCss.js'
);
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.config.stripBrs=true;
SyntaxHighlighter.all();
</script>
⑦ 記事の書き方（標準エディタまたは、新エディタを利用）・・・ＣＳＳの例
・ ソースコードを記事に貼ります。
★ アメブロの編集エディタはＨＴＭＬモードと通常モードの切り替えで、
改行部分が変化するので注意してください。
標準エディタで変化して、おかしくなった場合は、
記事編集→ＨＴＭＬモード→標準モード→公開 を行ってください。
・ ＨＴＭＬモードにしてソースコードを下記の様に囲みます。
<pre class="brush: css toolbar: false;" title="題名を入れたい場合はここに入れる">
ＣＳＳソースコード
</pre>
toolbar: false;・・・？のSyntaxHighlighterのバージョン情報を表示させない場合に
この指定をしてください。
SyntaxHighlighter.defaults['toolbar'] = false; をスクリプト内で指定している場合は、
不要です。
・ toolbar: false; を指定しない場合
<pre class="brush: css" title="題名を入れたい場合はここに入れる">
ＣＳＳソースコード
</pre>
⑧ デザインの選び方
文字色や背景色の設定ができます。
⑤、⑥の該当箇所の変更が必要です。
● ＣＳＳは shThemeDefault.css shCore.css 以外に下記を指定できます。
Ａ shThemeDjango.css shCoreDjango.css・・・ジャンゴ
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/django.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeDjango.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreDjango.css" type="text/css">
Ｂ shThemeEclipse.css shCoreEclipse.css・・・イクリプス
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/eclipse.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeEclipse.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreEclipse.css" type="text/css">
Ｃ shThemeEmacs.css shCoreEmacs.css・・・イーマックス
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/emacs.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeEmacs.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreEmacs.css" type="text/css">
Ｄ shThemeFadeToGrey.css shCoreFadeToGrey.css・・・フェイドツウグレイ
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/fadetogrey.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeFadeToGrey.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreFadeToGrey.css" type="text/css">
Ｅ shThemeMidnight.css shCoreMidnight.css・・・ミッドナイト
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/midnight.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeMidnight.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreMidnight.css" type="text/css">
Ｆ shThemeRDark.css shCoreRDark.css・・・アールダーク
Example
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeRDark.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreRDark.css" type="text/css">
Ｇ shThemeMDUltra.css shCoreMDUltra.css・・・ＭＤウルトラ
Example
なし
Exampleがないので下記画像を参照
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shThemeMDUltra.css" type="text/css">
<link rel="stylesheet" href="④で入れたDropboxのＵＲＬ/syntaxhighlighter_3.0.83/styles/shCoreMDUltra.css" type="text/css">
⑨ デザインのカスタマイズ
● shCore★★★.css でカスタマイズできそうな箇所
.syntaxhighlighter a,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter table,
.syntaxhighlighter table td,
.syntaxhighlighter table tr,
.syntaxhighlighter table tbody,
.syntaxhighlighter table thead,
.syntaxhighlighter table caption,
.syntaxhighlighter textarea {
-moz-border-radius: 0 0 0 0 !important;
-webkit-border-radius: 0 0 0 0 !important;
background: none !important;
border: 0 !important;
bottom: auto !important;
float: none !important;
height: auto !important;
left: auto !important;
line-height: 1.1em !important;/* ここを変えるか消せば行間隔が変わる */
margin: 0 !important;
outline: 0 !important;
overflow: visible !important;
padding: 0 !important;
position: static !important;
right: auto !important;
text-align: left !important;
top: auto !important;
vertical-align: baseline !important;
width: auto !important;
box-sizing: content-box !important;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 1em !important;
min-height: inherit !important;
min-height: auto !important;
overflow-y:hidden !important;/* 縦スクロールバー削除(追加) */
}
.syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important;
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 100% !important;
height: 100% !important;
border: none !important;
background: #010101 !important;
padding-left: 1em !important;
overflow: hidden !important;
white-space: pre !important;
}
● shTheme★★★.css でカスタマイズできそうな箇所
（１行目、２行目の背景色を変えると縞模様になる）
.syntaxhighlighter {/* タイトル（題名）部分の背景色 */
background-color: #010101 !important;
}
.syntaxhighlighter .line.alt1 {/* １行目 背景色 */
background-color: #151515 !important;
}
.syntaxhighlighter .line.alt2 {/* ２行目 背景色 */
background-color: #111111 !important;
}
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 {/* 上記の文字色 */
background-color: #e0e0e0 !important;
}
.syntaxhighlighter .line.highlighted.number {/* 番号部分の文字色 */
color: #eeeeee !important;
}
.syntaxhighlighter table caption {/* タイトル 文字色 */
color: #0101ff !important;
}
.syntaxhighlighter .plain, .syntaxhighlighter .plain a {/* 通常文字色 */
color: #ffffff !important;
}