ソースコードを載せたい 続き
前回: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
今はプラグインを停止しているため、表示しない。
syntax highlight系のプラグインはたくさんある。
-
google ドキュメントでWeb公開する
参考:http://hokoxjouhou.blog105.fc2.com/blog-entry-1331.html
- googleドキュメント新規作成からコードを書く
- ページ設定で、余白や背景色を設定
- ファイル→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
次回:CodePen以外にもある、オンラインエディタ。js実行環境