ソースコードの表示には SyntaxHighlighter: blogger

時々ソースコードまがいをのせることがあるので、あちこちで見かけるような綺麗な表示方法を探ってみた。

1.次のコードを、テンプレートに追加する。 Blogger テンプレート → HTMLの編集
</head>の直前に追加する。

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

次のコードを、</body>の直前に追加する。

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

ソースコードをこれで表示するためには、次のように挟む。

<pre class="brush: js">ソースコードの内容</pre>

又は、次のように挟むと、<>等の文字をエスケープさせる必要が無い。

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
ソースコードの内容
]]></script>

Blogger の公式投稿画面では、ソースコードを他からコピーして、ペーストすると、自動的に<pre> タグで囲まれることもあるので、HTMLソースの編集で、<pre> を<pre class="brush: js">等に変更すればよい。

多様なデザインがあるので、白調、黒長等好みで選べる。

Name File
Default shThemeDefault.css
Django shThemeDjango.css
Eclipse shThemeEclipse.css
Emacs shThemeEmacs.css
Fade To Grey shThemeFadeToGrey.css
Midnight shThemeMidnight.css
RDark shThemeRDark.css

 href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

 

のshThemeDefault.cssの部分をshThemeEmacs.css、shThemeRDark.cssなどに変更すればよい。

       /***********************************
        ** Multiline block comments
        **********************************/
      
       $stringWithUrl = "http://alexgorbatchev.com";
       $string   = 'hello world!';
       
       ob_start("parseOutputBuffer");  // Start Code Buffering
       session_start();
       
       function parseOutputBuffer($buf) {
        global $portal_small_code, $portal_gzcompress;
        global $PHP_SELF, $HTTP_ACCEPT_ENCODING;
      
        // cleaning out the code.
        if($portal_small_code && !$portal_gzcompress) {
         $buf = str_replace(" ", "", $buf);
         $buf = str_replace("n", "", $buf);
         $buf = str_replace(chr(13), "", $buf);
        }
       }

ちなみにダブルクリックすると、ソース全体を選択できる。コピーする時には。

  • このサイトに新規記事を投稿する時、同時に Facebook にも投稿するように設定している。 Next Scripts: Social Networks Auto Poster  というプラグインを利 ...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなか ...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法 ...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決 ...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるには バンコクでミャンマ ...
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linu ...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wo ...

タグクラウド

blogger カテゴリ人気記事 Views most

blogger・ブログ カテゴリ人気記事 月間

20151106

タグ関連記事

閲覧履歴

    //cookieが無い場合の処理
2019
GA-views: 3
20151106