サイトにソースコードを掲載する方法

コード その他

HTMLやCSSについてネットで調べているとき、ソースコードを掲載しているサイトを見かけますが、そもそもどうやって表示させているのか、知っていますか?

ただソースコードを表示させるだけなら、preタグで囲めばできるのかなと思っていたのですが、ソースコードを表示するだけでなく、ソースコードと実際の見え方のセットで見られるものがあり、とても便利だなと思っていました。

そこで今回は、サイトにソースコードを掲載する方法について、調べてみました。

CodePenを利用する

CodePenという海外サイトがあり、そのサイト上で会員登録すると、利用できるようになります。

CodePenとは、Webブラウザ上でHTML、CSS、JavaScriptをコーディングでき、実際の表示をリアルタイムで見ながら開発ができるWebサービスです。

JavaScriptも使えるのは、私も調べて初めて知りました。

有料プランもあるようですが、無料プランでも以下のように、ソースコードを埋め込むことができます。

See the Pen TEST by kuro (@kuro20190514) on CodePen.

簡単にですが、埋め込むまでの手順を以下に記します。
※詳細を知りたい方は「CodePen 使い方」などで検索してみてください。

1.CodePenのサイトを開き、右上の[Sign Up]ボタンをクリックし、会員登録します。

2.チュートリアルが始まります。見終わったら、サイトに埋め込みたいソースコードを[HTML]欄、[CSS]欄、[JS]欄に入力します。

3.右上の[Settings]ボタンをクリックし、[Pen Title]項目を入力し、[Save & Close]ボタンをクリックして保存します。
※入力したHTML、CSS、JavaScriptのコードをセットで、Penという単位で保存しているようです。

4.保存が終わると、右下に[Embed]ボタンが表示されるので、クリックするとポップアップが表示され、最下部の[Copy & Paste Code]項目の埋め込みコードをコピーし、サイトに貼り付けます。

最後に

ソースコードを綺麗に表示させる機能をシンタックスハイライトと呼ぶようです。

シンタックスハイライト (英: syntax highlighting, 構文強調) とは、テキストエディタの機能であり、テキスト中の一部分をその分類ごとに異なる色やフォントで表示するものである。シンタックスカラーリング (syntax coloring) とも。

この機能により、プログラミング言語やマークアップ言語といった構造化された言語において、その構造や構文上のエラーが視覚的に区別しやすくなるため、ソースコードの記述が容易となる。エディタによってはシンタックスハイライトと、スペルチェックやコード畳み込みといった、その他の機能を統合して提供するものもある。

シンタックスハイライト – Wikipediaより引用

CodePen以外にも、WordPressのプラグインで利用できるものもあるようです。

「SyntaxHighlighter」で検索すると、紹介しているサイトがありますので、興味がある方は、一度調べてみてはいかがでしょうか。