ブログにソースコードを載せる話

Posted on 2017年4月28日 by wpmaster

海嘯広報課

悲しみに満ちあふれる仕様に引っかかった

WordPressのブログ内に限った話ではないけれど、
開発関連のブログ記事を作る場合、どうしてもソースコードを載せることは避けれないわけで・・・。

まぁ、そのまま載せると本文なのかソースコードなのか判断付きにくいのは当然なわけですよ？

やはりここでは、古き良きテキストエリアタグ<TEXTAREA>を使って
白地の外装ベースを作ってReadOnlyにすれば見やすいし、コピペもしやすいなと。

テキストタグに適当に<textarea cols=”120″ rows=”30″ readonly=”readonly”>っと入れてと、
ほらこれでポイっと。
とりあえずビジュアルタブでプレビューして見た目確認するか。

は？😐💦

そんな馬鹿な。😨✋
タグを再確認しに行ってみよう。なんかフォーマット変わってるけど・・・。
そしてもう一度ビジュアルタブを見てみると

ファッ！？😨💦

何故っ！何故っ！勝手にっ！増えてるんだお前はっ！👊😡🔥

調べてみたところ原因はWordPressは初期状態だと自動整形してしまうのだけれども、
それの影響がこのテキストエリア、というかソースコード周りに及んでいるせいのようだ。

当然そんな余計なご親切機能なんて切ってしまえば、胃がマッハになるようなことはないし、
いくつかの記事でその手順も書いてあるのだからやればいいんだろうけど・・・
切ったことで別のところで間違えたまま、記事があがると嫌じゃない？

そりゃ間違えることもあるよ、ヒューマンだもの☺

対応方法探し

まぁそれはそれとして、そうすると自動整形機能を残したままコードを記載する方法が必要だよね。
プラグインとか色々調べまくって、試してみたよ。
覚えてる分だけ列挙するね。🤗

Raw HTML

指定されたタグでくくると自動整形を一部無効かしてくれるみたいな機能らしい。
ためしてみた、がっ、ダメッ！ダメなんだよ！何も変わらずbrbrbrbr😨

WP Code Highlight.js

jsだからとりあえず余計な機能がない、という触れ込みで試してみたんだが、
なんかバージョンが合わないのかうまく機能してくれなかった。
よくみたらページの下部でFatalErrorを出してた。
直してもコードが正しく出る保証もなかったし、調査の手間が惜しいので採用しないことに。😟

Crayon Syntax Highlighter

今回はこのプラグインを選んでみた。ちょっと重いらしいが・・・。
とりあえず、色分けとかはプログラマ的には戦争の火種になりかねないけど、
何も考えずにコードが整形される影響を受けないことが良かった。
結局試行錯誤する羽目になったのは後述する。

GitHub Gist

外部でソースコード持つわけだからぶっちゃけ最適解だったんだ。
たぶんそうなんだし、変な機能がついてないから速度も当然早いんだ。
何故選ばなかったのか・・・いちいち別のウィンドウ開くのが面倒だったのかもしれない。
うん、一般的な技術者ならこちらを選ぶべきだと思う。👍😉✨

スポンサーリンク[pc-mieru][/pc-mieru][sp-mieru][/sp-mieru]

実際に試してみた

「Crayon Syntax Highlighter」は割と採用しているところも幾つかあったので、
これを利用することに。

初期状態で入れてみたところがコレ↓

// AppMain.cs
//--------------------------------------
using UnityEngine.SceneManagement;

/// <summary>
/// アプリケーション統括
/// </summary>
public class AppMain : SystemManager<AppMain>
{
    /// <summary>
    /// シーン遷移要求
    /// </summary>
    /// <param name="nextScene">遷移先のシーン</param>
    public void requestChangeScene(eSceneType nextScene)
    {
        mbSceneChangeWait = true;
        StartCoroutine(_changeScene(nextScene));
    }
}

あﾞあﾞあﾞあﾞ、縞々だね↑ぇ😔👆

読めるか！👊😡🔥

どうもテンプレートのcssは、ページが使ってるバックグラウンドカラーあたりを使ってるらしく、
whiteとか銘打ってるスタイルがブラックになるという珍現象が発生した。

cssを直接弄ってもいいけど・・・弄る場所探すのもなぁ・・・。

結論＝片っ端からスタイルを入れてみる！✊😤🌟

🐦　🐦　🐦　🐦　🐦

とりあえずいくつか候補を絞って
kayote
epicgeeks
coda-special-board
Son of Obsidian
この辺りはバックグラウンドカラーに影響しないということが総当たりで調べて判明。

// AppMain.cs
//--------------------------------------
using UnityEngine.SceneManagement;

/// <summary>
/// アプリケーション統括
/// </summary>
public class AppMain : SystemManager<AppMain>
{
    /// <summary>
    /// シーン遷移要求
    /// </summary>
    /// <param name="nextScene">遷移先のシーン</param>
    public void requestChangeScene(eSceneType nextScene)
    {
        mbSceneChangeWait = true;
        StartCoroutine(_changeScene(nextScene));
    }
}

これ（Son of Obsidian）が一番ベターなフィーリングだったので採用！✋😊✨

本当は背景白の方がよかったんだけど・・・。
WordPressで最初に採用するテーマは慎重に選ぼうね、という話。

ではまた👋😇💨

タグ: Crayon Syntax Highlighter, WordPress, ソースコードを載せる, テーマ