忍者ブログ
PCメモ
PC関係のメモ、気付いたこと。 simhとChromium OSをいじって遊んでいます。 Chromium OSのカスタムビルドを配布しています。(http://chromiumosde.gozaru.jp) twitter: @zui22904336 PGP fingerprint: 45FC 0E47 A68A FA06 02FE 2BEF B72C C6E6 F9FF 1C19
Admin / Write
2018/10/22 (Mon) 19:44
×

[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エスケープ(&lt;および&gt;に書き換え)しないといけないようです。
また、<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>要素が出力されていませんでした。原因はよくわかりません。公開した後ならちゃんと表示されています。

  


ランキングに参加してみました。クリックしていただければ嬉しいです。
にほんブログ村 IT技術ブログ IT技術メモへ
にほんブログ村

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

拍手[0回]

PR


Comment
Name
Title
Mail
URL
Comment
Pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
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/

.
  HOME   9  8  7  6  5  4  3  2  1 
プロフィール
HN:
zui
性別:
非公開
PR
忍者カウンター
忍者ブログ [PR]