ソースコードの表示には 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">等に変更すればよい。

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

NameFile
DefaultshThemeDefault.css
DjangoshThemeDjango.css
EclipseshThemeEclipse.css
EmacsshThemeEmacs.css
Fade To GreyshThemeFadeToGrey.css
MidnightshThemeMidnight.css
RDarkshThemeRDark.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  というプラグインを利用している。 SNAP can publish nicely formatted messages to your social networks accounts. You can reach the most audience and let all your friends, readers and followerSocial Networks Auto Poster {SNAP} – Free plugin for WordPress - NextScripts - NextScrip...
  • WordPress では、タグクラウドにそれぞれのタグの投稿記事数が表示されないのが標準であるが、時に投稿数が表示されているものもみかける。 どうすれば記事数を表示できるのか、調べてみたが、これがなかなかすんなりいかなかった。 最終的には2つの方法を見つけた。 1. Simple Tags プラグインをインストールする。 (既にインストールされていた。)    Tag Cloud 設定画面で次のように (%tag_count%) と加筆する <a href="%tag_link%" id="tag-link-%tag_id%" class="st-tags t%tag_scale%" title="%tag_count% topics" %tag_rel% style="%tag_si...
  • Bloggerの「人気の投稿」ガジェット (=WordPressの popular posts) に表示されている記事の中に表示したくない記事がある場合、次のように除外設定をすることができる。 Step 1  Blogger account にログインし、  Blogger ダッシュボードに行く Step 2 テンプレート -> HTMLを編集に行く。全選択+コピーしてバックアップしておく。 Step 3  次のコードを見つける。 <b:includable id='main'>   <b:if cond='data:title'><h2><data:title/></h2></b:if>   <div cl...
  • FlexSlider は Celtispack プラグインパック に含まれていて、画像ギャラリー作成時に、FlexSlider を選択できる。 このサムネイルが70x70pxで小さいので大きくする方法を探ってみた。 /DocumentRoot/wp-content/plugins/celtispack/modules/celtis-gallery-slider/ にある、celtis-gallery-slider.php を次の様に変更する。 赤字のsmall を好みの大きさのサムネイルの通称に変更すれば良い。  diff celtis-gallery-slider.php celtis-gallery-slider.php.back 80c80 < 'size' => 'thu...
  • Blogger からKusanagi-WordPress への移転が完了し、一段落したので、これまでの経緯を振り返り、次回のためのマニュアルとして記す。 BloggerからWordPressに移行決定。 Bloggerでも独自ドメインで運用していた。 WordPressでも同一ドメインで運用する。 使用中のお名前コムのVPSでセットアップ+インポートしてみたが、Blogger Importer Extended でのデーター削除+再インポートの試みが成功せず、Kusanagiサーバーを試してみる良い機会とした。 Kusanagi-WordPressが使えるサーバーを探す。 システム構成: WordPress 4.3 (KUSANAGI専用プラグイン同梱) ・CentOS 7・N...
  • Blogger に表を挿入するには、ExcelよりもGoogleDoc Spreadsheets からコピペした方が、書式が反映されやすい。 バンコクでミャンマーVISAをとるには3日かかる。1日目、ミャンマー大使館に午前9時から12時までの間に行く。写真2枚、パスポートのコピーが必要。館内でコピーできる。12時間際にギリギリついたら入れてもらえたが、待ち時間が長く、最後の最後になった。翌々日に取りに来いという引換券。カウンタ番号2に指定されている。13時30分に取りにいく。ここでも1時間は行列で待たされる。近くのビルにコワーキングスペースがあって、カフェ-がある。冷房効いてるので待機するのに良い所。バンコクでミャンマーVISAをとるには - 信旅 銀行 イオン ジャパンネット銀行 楽天銀行...
  • 今時のCMSを調べてみると、Wordpress の他に、Concrete5 、Modx、Drupal 等があった。Concrete5 を使ってみることにした。 お名前コムVPS、CentOS Linux 7.1 +Webmin1.770+Mysql5.5.44+PHP 5.4.16 にConcrete5 をインストールしてみたら成功した。 めったにデーターベースの作成など、Mysqlをいじらない人にとっては、データーベースの作成、設定が一番とっつきにくいと思う。次の手順を踏めば簡単である。基本的にwordpress インストールの時と同じである。1. Mysql データベースの新規作成、ユーザー設定 いろいろな方法があるが、Webmin コントロールパネルから作成する。Web...
  • 支那ブロック回避対策でBloggerから引っ越しを検討する際に、あらためてVPSサービスの現状を調べてみた。 rootでログインできる自前サーバーである。 現在はお名前.com VPSを使用して、wordpressでサイト運営している。     これまで、アメリカのVPS、Osukini VPS、ServersMan@VPS、お名前.com VPS と経由してきた。 Osukini VPS はサービス中止で強制移転 DTIの ServersMan@VPS は変な制限が多くて使用に耐えない。DTIはSIMカードも悪どい儲け主義で辟易する。 DTI の ServersMan@VPS には変な制限がある ServersMan SIM Unlimited はボッタクアプリ   現在のお名前.com ...

blogger カテゴリ人気記事 Views most

タグ関連記事

閲覧履歴