プログラミング関連

ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介

Sponsored Link

Sponsored Link

ソースコードを記事中に表示させようと思ってブログの入力画面にそのまま貼り付けても
コードがそのままの状態で貼り付けられるわけなので当然コードとして認識されてしまいます。

そのため改行してしまったり、貼り付けたソース部分が丸々表示されずに空白になってしまったりして
コードがそのまま記事中に反映されることは出来ません。

ソースコードを記事中に表示させるために必要なこと

ですのでコードをそのまま表示させるためには
「これは掲載用のソースコード」であると認識をさせるための処理を行わなくてはなりません。

その必要な処理とは以下の3つです。
この3つの処理を行うことで、ソースコードをそのままテキストとして表示させることができます。

それぞれを説明していきます。

code要素

computer codeの略で、プログラムのコードであることを示すものです。
単語とか一行の短いセンテンスに<code>~</code>というふうに
code
要素を使ってタグではなく文字列であることを明示します。

今表示しているcodeはテキストでは
<code>code</code>
と記述しています。

つまり
<code> ここにそのまま表示させたいソースコードを記述 </code>
と書けば良いということです。

pre要素

Preformatted Textの略で、
複数行に渡るテキストはpre要素をつかってソースコードを整形済みテキストとして表示させます。
この要素を使うと要素内の空白文字や改行がそのまま反映されて表示されます。

例えば以下のような感じです。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>sample</title>
</head>
<body>
<iframe width=”560″ height=”315″ src=”sample.mp4″ frameborder=”0″ allowfullscreen></iframe>
</body>
</html>

実際にテキストの記述は以下のようになっています。

&amp;lt;!DOCTYPE html&amp;gt;&lt;br /&gt;
&amp;lt;html&amp;gt;&lt;br /&gt;
&amp;lt;head&amp;gt;&lt;br /&gt;
&amp;lt;meta charset=”utf-8″&amp;gt;&lt;br /&gt;
&amp;lt;title&amp;gt;sample&amp;lt;/title&amp;gt;&lt;br /&gt;
&amp;lt;/head&amp;gt;&lt;br /&gt;
&amp;lt;body&amp;gt;&lt;br /&gt;
&amp;lt;iframe width=”560″ height=”315″ src=”sample.mp4″ frameborder=”0″ allowfullscreen&amp;gt;&amp;lt;/iframe&amp;gt;&lt;br /&gt;
&amp;lt;/body&amp;gt;&lt;br /&gt;
&amp;lt;/html&amp;gt;

これは二重に変換をしたためにたくさん記述があるんですが。

一般的には要素と同じで、 <pre>~</pre>で囲んだ「〜」部分に入れれば表示されます。

特殊文字のエスケープ処理

エスケープ処理とは、マークアップ言語やプログラミング言語、スクリプト言語等で文字列を扱う際に、その言語にとって特別な意味を持つ文字や記号を、別の文字列に置き換えることです。

例えばHTMLでは、タグの記述に「<」「>」という記号(文字)を使用します。これらの記号をHTMLの中で使うと、Webブラウザはこれらを「タグ記述の記号」とみなすため、文字として表示することができません。そこで「<」を表示する場合には「&lt;」、「>」を表示する場合には「&gt;」という文字列を、HTMLの中に記述します。Webブラウザはこれらのエスケープ文字列を、表示の際に「<」「>」に置き換えて表示します。この処理をエスケープ処理とよびます。

引用で恐縮ですが内容は理解できるかと思います。
エスケープ処理をするのは以下。

右のように入力すると左のように表示されます。

先程の記述で赤で表示した部分がエスケープ処理がなされたものです。

簡単にソースコード変換ができるもの

先程見たようにこのエスケープ変換はいちいち手作業でやると面倒くさいです。
エスケープ変換だけでなくても様々なコードをWeb用に変換するのは結構手間です。

なのでそれを自動で変換してくれるサイトもいくつかあります。

私が利用しているのは以下

WEBサイト・ブログの為のHTMLソースコード変換

HTMLで< & ” >を < & ” > にエスケープ・エンコードしてくれて。
WEB用に置換変換してくれます。
そのままコピー&ペーストできるので非常に便利です。

元のソースを貼り付け「変換する」ボタンを押すと。

以下のように変換されます。

オプションには様々あり。
改行するかしないか、空白をそのまま表示するかしないかなど。
選べますので使い勝手は良いです。

Enlighter – Customizable Syntax Highlighterというプラグインの導入

ワードプレスを活用している方であれば
Enlighter – Customizable Syntax Highlighterというプラグインを導入すれば
簡単にかつきれいにコードが表示できます。
もっとも有名なプラグインであるCrayon Syntax Highlighterはワードプレスのバージョン 5.0.以降では利用ができなくなっていたりします。
このプラグインはその後継に当たるもので、「使用中の WordPress バージョン互換性あり」とあります。

インストール

WordPress管理画面 →プラグイン → 新規追加
→右上の検索ボックスに「Enlighter – Customizable Syntax Highlighter」と入れて検索します。
すると以下のプラグインが出てきますのでインストールをし、インストールが完了したら「有効化」します。

Enlighterの設定

有効化すると「設定」のところに「Enlighter」と表示されます。

これをクリックして出てきた画面の上部のタブで切り替えながら設定をしていきます。

 

なお今回インストールしたところ

Enlighter Plugin Error: Plugin “Crayon Syntax Highlighter” is enabled – it may take over the Enlighter pre elements – highlighting will not work!
というエラー表示が出てきまして。
Enlighterプラグインエラー:プラグイン “Crayon Syntax Highlighter”が有効になっています – Enlighterのpre要素を引き継ぐかもしれません – 強調表示は機能しません!

ということです。
そのため以下説明するもののうち「テーマ」がうまく機能しないんですが。

まあいいかということにして話を先に進めます^^;

Appearance

「Appearance」のタブをクリックすると以下の画面が出てきます。

それを図のように設定します。

 

以下その仕組を解説します。

 

Theme

デフォルトで使用するテーマを決定すしますが、
記事内で何も選択しなかった場合はEnlighterになります。

Default Language

デフォルトで使用する言語を決定します。
HTMLやCSSを使うことが多い方はそれを。
PHPをよく使う方はPHPを選べばよいです。

Code-Intend

コードをコピペした時、タブのスペース分を何に置き換えるか、を設定します。
タブスペースをそのままで残したい場合、No modification (keep tabs)(変更なし)を選択。

Show Linenumbers

左側に行数を表示するかの設定。表示されていたほうが見やすいのでオンにしておきます。

Mouseover on codelines

コードにマウスオーバーするとハイライト(強調表示)されるようになります。
私の場合はエラーが出て強調表示が出来ませんが大丈夫な方はオンがおすすめ。

RawCode on dbclick

コード上でダブルクリックすると元のコードが表示されるようになりますが必要なし


Raw-Codebutton

コードにマウスオーバーすると右上に元コードとトグルするボタンが現れます。
必要であればオン、邪魔な場合はオフ。

Window-button (new Window)

オンにするとコードを「新しいウィンドウで開くボタン」が現れますが、必要なし。

Info-button

プラグイン制作元へのリンクがボタンで表示されまが、これも必要なし。

 

以上の設定で見かけはとりあえず整うので他のタブについては基本いじる必要がある方が限られるので割愛します^^;

使い方

投稿画面のビジュアルエディタにボタンが追加されていますのでそれをクリック。

するとポップアップ画面が出てきますのでそこにコードを入れます。


すると以下のように投稿画面に表示されます。

それがプレビュー画面ではこのように表示されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample</title>
  </head>
  <body>
    <video controls autoplay loop><source src="sample.mp4"></video>
  </body>
</html>

 

 

更にこれをクリックすると以下のように右上に詳細設定のボタンが出てきますのでそれをクリックします。

詳細設定

設定編集のポップアップ画面

各項目の解説

Mode

Block-Codeが基本なのでそのまま。

言語

言語を選びます。
Theme

テーマを選びます。選んだテーマによって見た目が違います。

Show Linenumbers

行数の表示有無。チェックが入っているのでOK。

Point out Lines

強調したいところの行だけ背景を別の色に変更据える仕様。
複数行の場合は、1-3などのようにハイフンで指定していきます。

Linenumbers offset

行の頭の数字を変更します。6行目から始めたい場合は6と入力します。

以上でこの項は終了です。

Sponsored Link

Sponsored Link

関連記事

  1. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
  2. CSSで要素を横並びにする方法(floatとdisplay)とd…
  3. HTML ul ol liタグで作る箇条書きリスト 使い方の基本…
  4. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  5. CSS 擬似要素beforeとafter 使い方基本
  6. aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを…
  7. CSS WEBアイコンフォントの使い方 Font Awesome…
  8. HTMLの勉強で押さえておくべきこと①Markup Langua…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. HTMLで動画や画像を埋め込みする方法を詳説
  2. 独自ドメインのメールアドレスとメールソフトの設定について!Windows10やGmailでで簡単に送受信する方法や
  3. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  4. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  5. Windows10 でフォルダの拡張子を表示するには?
  6. 【Basics of site construction】多すぎる選択肢 ホームページ作成方法  HTMLとCMSの長所と短所を知るべし
  7. WordPressエディタ「Gutenberg」の使い方 総まとめ
  8. 【Basics of site construction】ワードプレスで日付を消す方法

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

ウエブマーケティング入門酒場 
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

人気の投稿とページ

Windows10でブルーライトカットの設定 コントロールパネルの使い方
MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
HTMLで動画や画像を埋め込みする方法を詳説
AviUtl合成モードの種類とその効果 使い方
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtlのすべてのエフェクトについての解説③クリッピング・斜めクリッピング・マスク
HTML CSS テーブル(表)の作り方とその装飾の仕方 基本
AviUtlのすべてのエフェクトについての解説⑫アニメーション効果(2)

ソフト・アプリの使い方

PAGE TOP