ウェブページにソースコードを表示する方法3選

ウェブページでは、ソースを張りつけてもそのまま表示することはできません。

ソースを公開する方法を3つ紹介します。

海外サイト「Code Pen」


https://codepen.io/
有料プランもありますが、無料で使える機能なのでFREEで登録しましょう。

必要なソースコードを書き込む。
コード入力画面の右下の「Embed」を押す。
取得したコードを設置したい箇所にコピペする。

表示すると↓のようになります。

See the Pen sample by suto7 (@suto7) on CodePen.

GitHubの機能「Gist」


https://github.com/
有料プランもありますが、無料で使える機能なのでFREEで登録しましょう。

右上の「+」>「New Gist」を選択する。
拡張子をつけたファイル名とソースコードを書き込む。
コード入力画面の右下の「Embed」を押す。
取得したコードを設置したい箇所にコピペする。

表示すると↓のようになります。

WordPressプラグイン「Crayon Syntax Highlighter」


※ウェブサイトをWordPressで作成している場合※
WordPressプラグインを新規追加する。
「Crayon Syntax Highlighter」検索する。
インストール終了後、「有効化」をクリックする。
ダッシュボードの左下の「設定」>「Crayon」が追加される。
※ここで必要ならば設定を編集する。
投稿編集ページではボタンが追加されている。
ビジュアルタブの中には「<>」/テキストタブの中には「Crayon」

「<>」ボタン、または「Crayon」ボタンを押す。
別ウィンドウで表示された入力欄にソースコードを書き込む。
コード入力画面の右上の「Add」を押す。

好みのツールを使って、わかりやすいソースコード表示を実現しましょう。

コメント