趣味でやってるコーティングでメモしておきたいことがある。
ここで書くとデフォルトではこうなる。
Hello World
これを
Hello World
こうしたい。
これはこれでええけど自分が検索した時によく見るようなエディター風のデザインを取り入れる方法を探したメモ。
見た目がわかりやすくてコピペもしやすい。なにより色味が好き。
趣味でがちゃがちゃ遊びまくって上手く進んでも２、3日前やった方法が全く思い出せないことに気づいた。
さらにレアケースがあるとまた情報探すのが面倒。レアケースといっても高度だということではなく誰もつまづかないところでつまづいたり、
そもそも内発的な欲求が発端なので完全に似てるケースを探すのは難しい。
また、探して情報公開してくれてる人にも感謝しているのでメモが自分以外にも役立てば幸い。
基本趣味プログラミングといっても内容は全くわかってない、
コピペで戦艦ゲームみたいに遊んでいる。
プロの人たちは０からロジックを考えるが、自分の場合は使えそうな素材をもってきてはアマチュア日曜大工のようなイメージ。
みんながアプリ使って便利な機能を使うように、面白そうなコードを見つけて遊んでみる。
これが実に楽しい。
サッカーや筋トレできつく基礎の重要性を感じてはいるものの、飽き性なので特定の言語によってないので書いてる内容がわからない。
完全なるアマチュアから抜け出せていないが逆にそれでも異なる言語をやりたいことの1/100でも形になっているものがあることを考えると、
もしかして天才なのかもしれないと捉えることにしつつある。
自分がやった枝葉のようなものとは別にプロの人たちから教わったことで最近面白かったのは、
薦めてもらった基礎分野の本が数年前の比較的古めのものであること。
普段わかっていないことがわかるように眼から鱗の連続。
流行りすたりでショートカットを追うのではなくて、基礎を学ぶことは間違いなく同じ状況における理解度しかり得られる情報が格段に変わってくるのだなあと。
最前線で活躍してる人が今でも価値があると言える本はプログラマーではなくても読んだ方がいいなとも。
それだけ書いてる内容は今の世の中のベースのことが書かれている。
DXが注目されてるけれどプログラマーではない人ほど触ってみたりベースを知る。知ろうとすることの世の中のポテンシャルが非常に高いと思っている派。
ほんで掲題の件。すぐに出てきたのがgithubにあるgooglearchive/code-prettify
これでよくみるエディター風に書けるらしい、jsファイル1行書いてclass指定するだけ。
https://github.com/googlearchive/code-prettify
Google Archiveとは
Where old projects go to retire. All projects here are completely frozen, though feel free to fork and continue using them on your own.
<google翻訳>古いプロジェクトが引退するところ。ここにあるすべてのプロジェクトは完全に凍結されていますが、フォークして自由に使い続けることもできます。
へえ。凍結されたプロジェクトを自由に使って良いレポジトリがあるんや。その数907。今回はそのうちのcode-prettifyを利用する。
Google code prettifyとは
You can load the Prettify script to highlight code in your web pages.
It adds styles to code snippets so that token boundaries stand out and your readers can get the gist of your code without having to mentally perform a left-to-right parse.
<google翻訳>Prettifyスクリプトをロードして、Webページのコードを強調表示できます。トークンの境界が目立つようにコードスニペットにスタイルを追加し、リーダーが左から右への解析を精神的に実行する必要なく、コードの要点を取得できるようにします。
始め方リンク
https://github.com/googlearchive/code-prettify/blob/master/docs/getting_started.md
どうやりたいか
・wordpressで使う
編集時投稿画面で完結したい
・プラグイン使わない
利用してないページでjsを表示させない
・簡単な方法
カテゴリーやタグで限定し自動でjsを利かすこともできるが編集時の手間考えると1行加えるだけなのと都度テーマの編集なども気軽にできるので投稿にオートローダーのためのリンクを貼るやり方
実際の手順
ダウンロードしたり、カスタマイズの方法はソース元のページで確認するか、検索すれば詳細に説明してくれているページがあるのでそちらを参考にされたし。
ただ注意としては数年前からあるものなのでURLが古くなっているものもあるのでオートローダーを使いたい場合はソース元からのが無難。
1:スクリプトタグを添付
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?"></script>
読み込み速度を気にされる方はでページ下部へ記述したりasync/deferなり読み込み遅延を行うのがよさそう。js?以降にエディターのテーマを指定したりできる。
2:codeもしくはpreタグで囲いclass指定する
<code class="prettyprint lang-js linenums">
console.log('Hello World')
</code>
これだけ。
めちゃ簡単。
カラーテーマは最初のスクリプトタグに。CSSでオリジナルの色を使うことも可能だろう。
class指定時にプログラミング言語を指定したり
うまくソースコードが表示されない
簡単なはずだった。記録がてらこのメモに記しつつ進めてたら文字化け、scriptタグで挟まれた内容が表示されない。
いくつもページを探しても文字化けしてる人にはなかなかあたらない。
テーマの問題かwodpressではプラグインを推奨してるからかはわからないが、htmlコードを書いた時にタグが消えたりするのを見て通常のタグと同じ扱いを受けて非表示になってしまっているようだった。
そういうのが内容にできるやつちゃうんかいと思いつつ、htmlなど文字変換が行われてしまうものはエンコードをして載せることにした。
「エスケープ変換 html」で検索するとツールを提供してくださっている人たちがいる。
そこを利用するとうまく上記のように表示ができた。
例えばこれが
↓こうなり
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?"></script>
こうやってpタグが見えるようになる。
<p>こんにちは</p><
jsをclass指定すれば表示も配色も自動で変わる。
console.log('Hello World')
まだちょいちょい納得いってないところあるけど、とりあえず最低限の設置とさらっと表示できてない人用の備忘録。
