codeタグとは?HTML文にコードを解りやすく書く方法を解説

codetagtitle

学習したプログラムについて、ブログなどの記事を書くときに

HTML文章に、文字としてHTMLタグなどを表示したい場合どうすればよいの?

というように感じたことは無いでしょうか。

今回はcodeタグの

・基本的な使い方
・プログラムコードを見やすく装飾する方法

について解説します。是非参考にしてみてください。

codeタグとは

codetag01

codeタグの読み方

codeタグは「コードタグ」と読みます。プログラムコードのコードです。

codeタグの説明

codeタグで囲まれたところに書き込んだ内容が、プログラムのソースコードであることを意味します

codeタグ内の内容は、そのまま表示されます。codeタグで囲まずにプログラムのソースコードを記述すると、誤動作する場合があります。

codeタグで利用できる属性

グローバル属性以外は利用できません。

グローバル属性はすべてのHTMLタグで利用できる属性です。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
nternet Explorer 完全対応
Opera  完全対応
Safari 完全対応
スマートフォン用ブラウザ 対応状況
Android webview 完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari 完全対応
Samsung Internet 完全対応

codeタグの基本的な使い方

codeタグの使い方

前述のとおり、codeタグを利用するとプログラムのソースコードをそのまま書くことが出来ます

ブラウザがHTML文章を読み込む際に、プログラムで利用するような特殊な記号があると、それをソースコードとして処理してしまいます。

例えば、<(小なり)という記号を書くと、<div>などのタグの先頭部分として処理されてしまい、以降の内容が正しく表示されなくなります。

それを回避するためには、エスケープ文字というものがあります。<(小なり)の場合には、&lt;という文字を使います。この&lt;を読み込むとブラウザが<に変換してくれるという具合です。

ただ、すべての記号をエスケープ文字で記載するのはとても面倒な作業になります。そのためcodeタグを使うと、エスケープ文字を利用する必要なくそのままソースコードを書くことが出来るのです。

preタグを使い、更に楽にソースコードを記述する

codeタグを利用すると気付くことなのですが、ブラウザはhtml文章は半角スペースや改行を無視します。

これは、codeタグで囲っても同じことになります。

例えば下記のようなコードを書きます。※コードの内容は動作に関係ありません。

この場合、ブラウザが表示するのは下記のように、改行や半角スペースの一部は無視されます。

let box1 = document.getElementById(“box1”); box1.innerHtml = “テキスト”;

そこで、改行や半角スペースをそのままブラウザで表示させるpreタグが必要になってきます

下記のように書くことで、思い通りに表示されるようになります。

codeタグをpreタグで囲うことで、下記のように表示されるようにできます。

        let box1 = document.getElementById(“box1”);
        box1.innerHtml = “テキスト”;
注意
逆にcodeタグでpreタグを囲うと、preタグは文字として処理されるのでうまく動作しないので注意が必要です。

シンタックスハイライトプラグイン

codetag03

codeタグでコードを表示する際、大抵の方はその表示スタイルを、エディタのように見せる場合が多いです。

このサイトでも、上記で記述したコードのように、黒い背景で予約語(あらかじめ定義されている特殊な単語)を色分けして表示しています。

基本的には、これをゼロから作るのはとても大変であり、一般的には下記のようなプラグインを利用します。

prism.js

prism.jsは、ダウンロードしてWebサイト内に設置・参照して使うタイプのプラグインです。必要なものだけを選びダウンロードできるので、若干軽くできるのが特徴のようです。

以下に導入手順を記載します。

ダウンロード

prism.jsの公式ページへアクセスし、ダウンロードボタンをクリックします。

 

次に、Themesで外観のテーマを決め、Languagesで書く予定のある言語があればチェックをつけてます。

codetag04

最後に画面下部までスクロールをして「DOWNLOAD JS」と「DOWNLOAD CSS」をクリックしてダウンロードを完了します。

codetag05

prism.jsの設置・参照

ダウンロードしたファイルを、サーバー上の任意の位置に設置します。

ここでは

  • prism.jsはjsというフォルダを作成しその中に設置
  • prism.cssはcssというフォルダを作成しその中に設置

参照は下記のようにします。

設置と参照は以上です。

prism.jsの利用方法

prism.jsはcodeのclassで指定することで必要なcssを適用させることが出来ます。

クラス属性に、class=”language-利用する言語”を指定します。

htmlはlanguage-markupで下記のように記述します。

そして、cssの場合には下記のように利用する言語を変えるだけで良いです。

prism.jsの使い方は以上です。

highlight.js

highlight.jsはprism.jsとは異なり、ダウンロードせずに直接リンクを張ることで利用することが出来ます

この使い方をCDNといいます。

勿論ダウンロードをして利用することもできます、リンク先が異なるだけです。

highlight.jsの設置・参照

hithlight.jsはCDNでの利用が一般的なので、設置の必要はありません。

ただし、ダウンロードをする場合には公式サイトよりダウンロードを行い、サーバーの任意の場所に設置します。

CDNでの参照は下記のように記述します。

そして、Webページのどこかでこちらのスクリプトを実行する必要があります。これは上記のscriptタグより後に記述してください。

ダウンロードした場合には、hrefとsrcを設置したURLに変更してください。

highlight.jsの利用方法

hightlight.jsの利用法は、他の物と同じようにclass属性の指定で言語を切り替えます。

下記はhtmlを記述する際のclass指定です

そして、cssを記述する場合には下記のように書きます

highlight.jsの使い方は以上です。

Google Code Prettify

Googleのcode-prettifyもCDNで参照だけして利用するタイプのシンタックスハイライトです

若干他の物と異なるのは、参照時にクエリを利用してテーマなどを代えることができることです。

Google Code Prettifyの配置・参照

こちらも、下記のようにリンクで参照をするだけで利用できます。

基本的にはこの一行だけで利用可能になります。

Google Code Prettifyの利用方法

このcode-prettifyの場合には、テーマを変える時に下記のようにリンクのURLにクエリを追記します。

詳細は公式のGithubのGetting Startedを読んでください。

そして、コードを記述するには、下記のようにclassをしてしてください。

code-prettifyの利用方法は以上です。

まとめ

いかがでしたでしょうか。

学んだコードなどを書くときには、出来るだけ見やすく書くとわかりやすい文章が書けます。

この記事を参考にして、見やすい記事をかけるようなれたら幸いです。

是非参考にしてみてください。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?