ブログにソースコードを載せたい(別法)

ソースコードを載せたい 続き

前回:https://weekend-v.work/blog/wp/archives/1

  • <pre><code>で囲む

HTML <pre> 要素は、整形済みテキスト (preformatted text) を表します。この要素内のテキストは一般的に、ファイル内でのレイアウトをそのまま反映して等幅 (“monospace“) フォントで表示されます。

HTML の <code> 要素は、コンピューターコードの短い断片の文字列であると識別できるような外見のコンテンツを表示します。既定では、中の文字列がユーザーエージェントの既定の等幅フォントを使用して表示されます。

<pre>だけで囲っても表示できる。

  • バッククォートで囲む

html
<!DOCTYPE html>
<html>

<head><title>blog</title></head>

</html>

バッククォートでも、グレーの枠で囲まれる。

<code>がつく。
しかし、1タグずつしかできないようだ。

これらは、MarkDown記法の1つだった。

  • JavaScriptライブラリを読み込む

ライブラリには以下がある。

  • highlight.js
  • Google Code Prettify

これは、コードを表示するというより、ハイライトをつけるもの。

上記の<pre></pre>で囲うまでは同じで、’Code Prettify’は、<pre>にclass=”prettyprint”を追加する。

‘highlight.js’は、そのまま使える。

それぞれ、cdnをheaderやfooterで読み込んで使用する。

ワードプレスならプラグイン

  • Crayon Syntax Highlighter

これは、コードを貼り付けるだけで、シンタックスハイライトが適応される。
プラグインを使わなければ、jsなどを書かなければならないが、プラグインなら簡単にできる。

今はプラグインを停止しているため、表示しない。

syntax highlight系のプラグインはたくさんある。

  • google ドキュメントでWeb公開する

参考:http://hokoxjouhou.blog105.fc2.com/blog-entry-1331.html

  1. googleドキュメント新規作成からコードを書く
  2. ページ設定で、余白や背景色を設定
  3. ファイル→Web公開で埋め込みを選択、iframeをブログに貼り付ける。

  • GitHubのGistを使う

gistにアクセスして、ファイルの説明や、ファイル名、コードを記入。

右上にある’Embed’から、scriptをコピーして、⏬

<script src=”https://gist.github.com/rea-jin/f62df3bb71722f6a3473c8bbd8afbc43.js”></script>

ブログに貼り付ける。ワードプレスで言えば、テキスト側で。

すると下のように表示される。バージョン管理もでき、推測されにくいURLを作成でき、共有できる。

https://yuoishi.github.io/gh-pages/Gist.html

  •  Code Pen

これが一番いいと思う。
ソースコードと出力結果を同時に見れるからだ。
PHPはかけなさそうなので、他のはGistが良さそうかな。
登録をして、createでcodeを作成。
saveをして、右下のEmbedから、埋め込み用のコードをテキストエディタの方に貼り付ける。

See the Pen
VwYQOvp
by rea-jin (@rea-jin)
on CodePen.

次回:CodePen以外にもある、オンラインエディタ。js実行環境