PCメモ忍者ブログにSyntaxHighlighterを導入する

[PR]

2025/01/18 (Sat) 14:11

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2014/02/13 (Thu) 21:43

このブログは忍者ブログを使っているのですが、そのうちPHP関連のソースコードを載せることがあるかもしれないので、今のうちにSyntaxHighlighterを導入しようと思います。

SyntaxHighlighterはブログ、ホームページなどできれいにソースコードを表示するためのツールでJavaScriptとCSSで実装されています。

SyntaxHighlighterは以下のURLからダウンロードできます。

http://alexgorbatchev.com/SyntaxHighlighter/download/

このページの冒頭の"Click here to download"をクリックするとzipファイルのダウンロードが始まるので適当なところに保存して展開します。今回ダウンロードしたのはsyntaxhighlighter_3.0.83.zipです。

インストールの方法は英語ですが以下のURLに書いてあります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html

とりあえずここに書いてある通りに作業してみます。

まず展開してできるフォルダの下にある以下の各ファイルを忍者ブログのファイルアップロード機能でアップロードします。

script/shCore.js
scripts/shBrushPhp.js　（※）
scripts/shBrushXml.js　（※）
styles/shCore.css
styles/shThemeDefault.css

※で示したscripts/shBrush???.jsは使う言語によって変えるみたいです。今回はPHP用のファイルであるshBrushPhp.jsと、XMLやHTMLで使えるshBrushXml.jsを使います。

アップロードしたらブログ設定のデザイン－PC用テンプレートを開き、使用中テンプレートの「修正」リンクをクリックします。

HTML編集欄の<head>～</head>の間に以下の行を追加します。

<script type="text/javascript" src="http://file.ブログのホストアドレス/shCore.js"></script>
<script type="text/javascript" src="http://file.ブログのホストアドレス/shBrushXml.js"></script>
<script type="text/javascript" src="http://file.ブログのホストアドレス/shBrushPhp.js"></script>
<link rel="stylesheet" type="text/css" href="http://file.ブログのホストアドレス/shThemeDefault.css" /> 
<link rel="stylesheet" type="text/css" href="http://file.ブログのホストアドレス/shCore.css" />

http://file.ブログのホストアドレス/の部分は、このブログの場合はhttp://file.pcmemo.take-uma.net/になります。これで準備は完了です。あとは、ソースコードを埋め込みたい箇所を以下のように <pre>で囲みます。

<pre class="brush: php; html-script: true">
<?php
phpinfo();
?>
</pre>

このとき、<pre>～</pre>で囲む部分に"<"や">"があるときはHTMLエスケープ（<および>に書き換え）しないといけないようです。
また、<pre>のclass属性には"brush: "に続けてphpやxml、htmlなどの名前を書きます。使える名前は上で書いたアップロードファイルの一覧で※を付けたファイルの種類によって変わります。使える名前の一覧とshBrush???.jsの対応は以下のURLに書いてあります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

その後ろのhtml-script:trueは、phpなどのようにHTMLと混在して記述するスクリプト言語を清書する場合に指定します。html-script:trueを使うためには使う言語用のshBrush??.jsのほかにshBrushXml.jsが必須のようです。
このほかにもいくつかclass属性に指定できるオプションがあるようで、以下のURLに説明があります。

http://alexgorbatchev.com/SyntaxHighlighter/manual/configuration/

そして、ブログの最後に以下の<script>タグを書きます。このscriptタグがレンダリングの指示になります。

<script type="text/javascript">     
SyntaxHighlighter.all()
</script>

実はすでにこのページに載せているコードはすでにSyntaxHighlighterを使って成形したものになっています。結構いい感じですね。

このページのHTMLソースとこの記事を比較してみるのも参考になると思います。

でも公開前に詳細プレビューで確認するとうまく表示されないんですよね。なんかスタイルシートが読み込まれていない感じ。<head>に追加したスタイルシート読み込みの<link>要素が出力されていませんでした。原因はよくわかりません。公開した後ならちゃんと表示されています。

ランキングに参加してみました。クリックしていただければ嬉しいです。

にほんブログ村

パソコンブログランキングへ

[0回]

ブログ｜ Comment(6)

Comment

Winners Of 2011 Sportsman Choice Awards & Sportsman Of The

Jerryrhime URL 2017/12/16(Sat)04:21:17 編集

Leonardo Da Vinci ging als KГјnstler und VisionГ¤r in die Geschichte ein. In der neuen Serie Da Vinci's Demons erwacht Leonardo nun als Held, Freund und 19 hours ago Being in the business it's not JUST that millenials can't afford homes because a very big chunk can. instead of spending it on iToys, $tarbuck$, online shopping, etc., it's a good plan. Beans and franks, a $1 meal, english muffin and cheap tuna (who
http://supercoolshop2.co
Results 1 - 16 with 185 971 Pictures | 1 618 Videos | 7 478 Celebrities | 68 327 MembersImages newest > Created > Designated Survivor (TV series) , page /0. 11 Jun 2014 Kelly Rowland pregnant; 'Pretty Little Liars' renewed; 'Now & Then' TV series: AM Buzz. Kelly Rowland arrives at the Billboard Music Awards at

Adult Swim Releases Trailer For Upcoming Comedy Series

FreddieSOP URL 2018/01/14(Sun)16:30:05 編集

12 Dec 2013 вЂњThe SparkвЂќ on WKNO-TV Looks at Faith in the Community this Holiday Season. In this month's episode of the monthly series вЂњThe SparkвЂќ on 5 Aug 2010 Our Mango Lounge Chairs, Turquoise Pillows, and Rattan Illumina Box Tables made an appearance on the new A&E TV series ". The Glades.
http://watchtvonline.io/episode/prison-break-episode-s1-e16-start-review-synopsis/ - useful source
Sep 3, 2016 Bravo, В« Hoarders (G), Million Dollar Listing NY (PG), Snapped: Killer Rehab Addict (G), American Rehab: Buffalo (G), House Crashers (G). A description of tropes appearing in Man from U.N.C.L.E.. A one hour dramatic series which ran from September, 1964 through January, 1968 on NBC. Created

скачать готовый сервер кс 1 6 с випкой

DavidLigma URL 2018/02/01(Thu)14:39:11 編集

Приветствую! Класный у вас сайт
Нашел прикольные правила сервера кс 1 6 http://serveracs16.net/ :
<a href=http://serveracs16.net/game/cs> сервера с картой mansion cs 1 6 </a>
<b> как создать сервер в кс го </b> http://serveracs16.net/game/csgo
<b> как ать сервер css </b> http://serveracs16.net/game/source
И тут нашёл много интересных новостей про игры и сервера:
http://serveracs16.net/server_info/46.174.48.14:27229/

Последние новости андроид здесь

Herbertelirl URL 2018/03/19(Mon)16:07:59 編集

Последние новости андроид здесь <a href=http://hi-android.net/>hi-android.net</a>

Выбираем мебель в детскую комнату

VaughnGob URL 2018/03/21(Wed)06:52:50 編集

Готовые гарнитуры для детской комнаты представляют собой универсальный уголок, в котором есть буквально все необходимое для полноценного развития ребенка, подробнее об этом читайте на сайте <a href=http://teletap.org>teletap.org</a>

неликвиды россии казань

Frankwarry URL 2018/03/24(Sat)17:58:12 編集

неликвиды россии казань

http://ckpiz.info/page/nelikvidi-rossii-kazan/

.