SSブログ
画像公開非公開の謎｜テレビの無い生活 ブログトップ

ソースコードを貼ってみるテスト　[So-netさん]

※スマートフォンでご覧になっている方へ（2016.4.9追記、2016.6.12 blog内で完結することが今さら判明したので変更）
本記事はPC版表示でご覧いただくことを推奨いたします。表示の変更は、思いっきり下にスクロールして「表示切替：モバイル｜PC」のPCを選択します。スマホ版表示に戻すには、思いっきり下にスクロールして「スマートフォン専用ページを表示」を選択してください。

一応私は「自称プログラマ」と自称している（←二重表現）ので、かねがねソースコードとか載っけちゃったりなんかしてみようかと思っていたのだが、こんな地味なやつじゃなくて
#include <stdio.h>
 
int main(void)
{
    printf("Hello, world!");
    return 0;
}

世の中にはもっとかっこよく表示されているのがある。何せ音声や地図やグーグルさんの盗撮写真(笑)も簡単にWebに埋め込める時代である。こちらもきっと簡単に出来るに違いない。で、検索してみた。
色々出てきたが、こちらの記事がずばりはまっているようなので早速試してみることにした。


この方法の素晴らしいところは、ややこしい部分はよそ様のサイトを参照するだけで、「参照します」の記述をこちらのHTMLのデフォに書き込むだけ。つまり、別個にファイルをアップする必要がない、まさに文字通りSo-netさんブログ向けである点である。
詳細はリンク先を見て頂ければ良いのだが（←人任せ(笑)）、ものすごくおおざっぱに要約すると、
  1. 方法として、Syntax Highlighter を使う方法とgoogle-code-prettify を使う方法がある。（どちらも設定のしかたはほぼ同じ。両方いっぺんに設定もできる）
  2. HTMLの<head>タグにスクリプトを追加する。（So-netさんのブログの場合、デザイン→テンプレート管理→HTML編集で、デフォのHTMLに埋め込んでしまう）
  3. （google-code-prettifyの場合）同様に<body>タグをちょっと変更する。
  4. 本文記事で、<pre>タグと適当なパラメータで囲ってコードを記述する。

これでできた！、と思ったら、色々紆余曲折した。

紆余曲折１
まず一つ目、とりあえずスクリプトを<head>にコピペしたら、どうにも様子がおかしい。ページのヘッダーのバー部分が残念なことになっている。

Header.png

以前も書いたように、StyleSheetで挫折している私としてはこれはとても歯が立たない。
Safariでぼんやりとソースを見ていたらおかしな部分に気がついた。（下図の43行目以降）

ScriptColorPattern.png

単に色分けが変な部分を見つけただけで、エラーに気づいたわけではない。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"/script>

の部分がダメらしい。ってかだめなの？？？(←わかっていない)
なわけで、

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

としたら、無事ヘッダーの点々々化は解消した。
これに関しては一番大元のネタがミスっていたようで、上記サイトでは既に修正済みである。大元をご覧になる方はご注意いただきたい。

紆余曲折２
43行目以降が通ったら今度はエラー表示が出た。ということはさっきのはエラーじゃ無かったのかよ！？（いやエラーだろっ！）

RedLine.png
ReferenceError.png

さきほどの「おおざっぱ要約」の３、ここで具体的に書くと、<body>に「onload="PrettyPrint()"」を付加するのだが、その部分について「ないでんがな」というエラーらしい。しらんがな(笑)。
上記サイトの管理人様にお尋ねしたところ、Safariの仕様とのこと。ご丁寧に参考URLをご紹介いただいた（ありがとうございます。←ってか自分で調べろよ！）。

SafariにおけるJavaScriptエラー二つ

エラーというよりもワーニングみたいなもののようなので、付加して問題ない、いややはり付加するのが必須のようである。

紆余曲折３
これが一番厄介くんだったのだが、上記スクリプトの問題は概ね解決したのでさっそくハローワールドしてみた。

Syntax Highlighter
// Hello World
#include <stdio.h>

int main() {
    printf(@"Hello, world!"\n");
    return 0;
}

google-code-prettify
// Hello World
#include <stdio.h>

int main() {
    printf(@"Hello, world!"\n");
    return 0;
}

え〝っ？

いや、Googleさんの方は良いのだが、Syntax Highlighterが実に悲惨なことに。。。
So-netブログのリッチテキストエディタのHTMLボタンをぽちっと押すと、<pre></pre>内の記述が見事にタグ付きに変更されている。意味ねー。（またもやコピペするのもアレなので、Wikipedia仕様のHello worldをわざわざ手打ちしたのに。。。）

TagPre.png

色々試した結果、So-netブログの場合、「リッチテキストエディタを利用する」モードで保存するとこのようなことになるらしい。逆に言えば、<pre></pre>の記述をまっとうに扱いたい場合は、ソースを確認した後「リッチテキストエディタを利用しない」モードで保存しなければならないということである。
保存だけではない、「利用しない」モードから「利用する」モードに変更した段階で既にタグが混入する（そこで保存しなければ良いのだが）。
このあたりも先ほどのサイトの管理人様にお尋ねしたところ（←全部人任せ(酷)）、Syntax HighlighterのXMLがそのまま表現できてしまう機能のためとのこと（これも逆に言えばGoogleさんはタグを解釈してくれるということですかね）。

ということでひとまず結論。

  • So-netブログでSyntax Highlighterを使用する場合、<pre></pre>内の整形された記述を確認ののち、「リッチテキストエディタを利用しない」モードで保存すること。
  • 意地でも「リッチテキストエディタを利用する」モードで保存したい場合は、Syntax Highlighterを使用しない。

２つ書きましたが、まあ同じことを言ってるわけで。。。

さて、以下は成功例である。この記事はここから先は二度とリッチテキストエディタで保存できない。（めんどくさいなあ。。。）
もしも表示が崩れていたら、「なめこさん、やっちまったな(笑)」と生暖かく見守っていただきたい。


Syntax Highlighter
// Hello World
#include <stdio.h>

int main() {
    printf(@"Hello, world!"\n");
    return 0;
}


google-code-prettify
// Hello World
#include <stdio.h>

int main() {
    printf(@"Hello, world!"\n");
    return 0;
}


おーっ！！！
実に素晴らしい！

まあ確かにSyntax Highlighterの方が見栄えはかっこいいが、運用が面倒だな（スマホで表示崩れることがあるそうだし）。
Googleさん、採用ですかね。

（ys_ootaさん、ありがとうございました）




2016-03-23 12:58  コメント(0)  トラックバック(0) 
共通テーマ：blog

コメント 0

コメントを書く

お名前：[必須]
URL：
コメント：
画像認証：
下の画像に表示されている文字を入力してください。

トラックバック 0

画像公開非公開の謎｜テレビの無い生活 ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。