私はプログラミング初心者ですが「学習を通して学んだソースコード」をブログ内で表示したい時がしばしばあります。
おそらく私以外にも、自分の学習した内容を通してソースコードを生成したものを、ブログに貼り付けたい方は少なからずいらっしゃると思います。
今回は、ブログ内にソースコードを貼り付ける方法
"こんな感じ"
↑(こんな感じ)が分かったので備忘録として記録したいと思います。
この記事でわかる事
- そもそもソースコードとは？
- preタグとは？
- Cocoonテーマでは簡単にpreタグが表示出来る
- Cocoonテーマは最強である
目次
ソースコードとは？
ソースコードの説明
ソースコードとは、
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>
このように黒背景のタグでで囲まれている「文字列」がソースコードです。
cocoonではpreタグを使用すれば、ソースコードを上記のようにハイライト表示させる事が可能です。
cocoon公式HPのソースコードの説明
実際にcocoonの公式でも「ソースコードをハイライト表示させる方法」の記事が上がっています。
https://wp-cocoon.com/highlight-js/
ちなみに私は「ソースコードとはなんぞや？」「preタグとはなんぞや？」という状態でした。
ですから、そんな私のような方に向けてその辺もわかりやすく説明していきたいと思います。
preタグとは
preタグの説明
preタグとは、
<a href="ここにリンク先のURLを貼る"target="_blank"><ここに写真のURLを貼る></a>
この文字が囲まれている「黒背景のこと」を「preタグ」と言います。
最初、私はpreタグが何なのか全くわかりませんでした。
そのため、Cocoonの公式HPからpreタグの部分をコピーして、テキストで「preタグのソースコード」を確認して使用していました。
preタグのソースコード
ちなみに、上の項目で書いた「preタグのソースコード」は以下のようになります。
<pre class="lang:default decode:true hljs php"> "ここに表示させたいコードを入力する"</pre>
「ふむふむ、preタグはこんな文字列で出来ていたのか！」
と納得したのですが、
「これをいちいちテキストに貼り付けていたらキリがない！」と同時に思いました。
Cocoonテーマではpreタグが簡単に表示出来る
なんとかならないものかと試行錯誤していたら、ついに発見してしまいました。
ふと、ソースコードの部分にカーソルを当てたら、左上の「段落」のところが見慣れない文字に変わっているではないですか。
「ん？整形済みテ...」
いました。整形済みテキスト。
これをクリックすると左下の文字が以下のように表示されました。
バッチリ「PRE」と書かれています。
つまり、preタグです。
というわけで、私とpreタグとの戦いは終焉を迎え、私とpreタグは共存の道を歩むことになりました。
cocoonテーマではハイライト表示が変更出来る
上にもCocoonHPでは「ソースコードをハイライト表示させる方法」が記載されているという事を書きました。
こちらの記事です。
https://wp-cocoon.com/highlight-js/
要約すると、
Cocoonテーマではハイライト表示を自分好みのものに変更する事ができます。CocoonテーマではjQueryプラグインのhttps://highlightjs.org/を使用しています。
設定はCocoon設定から変更する事ができ、「ソースコードをハイライト表示させていけど重たいプラグインをインストールしたくない」という場合には、便利な機能です。
というような感じでしょうか。
Cocoonテーマはプログラミングをやっている方もノンストレスで作業が出来るあたり、ますますワードプレステーマの最強無敵感が強まりましたね。
これからもCocoonテーマを応援していきます！
最後に
プログラミングにしろブログにしろ、「習うより慣れろ」とはよく言ったものですね。
私は自分の目で見て、手で感触を確かめたい性分なので周りの器用な方よりも成長スピードは遅いです。
しかし、亀の足でも一歩一歩進んでいきたいと思います。
そしてこの記事を見た方が少しでも「知らない事がわかった」となるように日々精進していきます。
この記事が少しでもお役に立てたら幸いです。
よろしければこちらの記事もご覧ください。
