Welcome to ほんっとに! INDEX をご利用ください

はじめての人にもわかりやすくHTMLの組み方を書いています。CSSも基本からやってみましょう。
サイトの編集ができるようになる手助けになれば…と思っています。HTML5+CSS3ベースです。

はじめてのHTML INDEX
HTMLについて [1]から順に読みたい、特定の記事を読みたいってときは、このINDEXからGO!
CSS3レイアウトも時々登場します。
HTML要素 索引
HTML要素のアルファベット別INDEXです。
特定のHTML要素について調べたいときには、わりと便利です。
はじめてのCSS INDEX
CSSについて【1】から読みたい、CSSの特定の記事を読みたいときは、こちらからGO!
(はじめてのHTML での CSSの使用例も、ここでINDEXにまとめました。ご利用ください)

サイト内検索はこちらからどうぞ

(ちょっとメモ)Prism の使い方(SyntaxHighlighterから乗り換えた)

最終更新日:2017年11月17日  (初回投稿日:2017年11月17日)

本サイトの シンタックスハイライターを Prism(プリズム)に乗り換えました。
これまで SyntaxHighlighter 3.0.83 を使っていましたが、順次差し替える予定です。

Prism は こんなかんじ。

<!--HTMLの場合-->
<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>

<!--CSSの場合-->
<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>

Prism は 設置も簡単。しかも軽い。
MDN(Mozilla Developer Network)Prism を使ってるというのも導入の後押しになりました。
というわけで今回は、Prism の使い方をメモっておきます。

本日のINDEX
  1. Prism の特徴(メリット・デメリット)
  2. Prism の導入準備
    1. ダウンロードページで「圧縮レベル」を選ぶ
    2. テーマ(スタイル)を選ぶ
    3. 使用する言語を選ぶ
    4. プラグインを選ぶ
    5. CSS と js をダウンロード
  3. Prism の設置
  4. Prism の基本の使い方
    1. Prism の言語のリスト
  5. プラグインを使用する
    1. 行番号を表示する(Line Numbers)
    2. 行をハイライトする(Line highlight)
    3. コメントテキストに任意のリンクを作る(Autolinker)
    4. 言語を表示する(Show Language)
    5. コードにマウスオーバーするとプレビューする(Previewer各種)
    6. その他のプラグイン

Prism の特徴(メリット・デメリット)

一番のメリットは、ソースコードの記述が W3C が推奨するカタチなこと。

W3Cの仕様では、ソースコードを表記するときは、<pre>要素だけでなく <code>要素も一緒に使い、<code>要素に class属性で「language-◯◯」というカタチで「ソースコードの言語」を示すことを推しています。

Prism は、<pre> <code class="language-◯◯"> 〜 </code> </pre> という形が基本なので、まるっきりW3Cの推奨のカタチで書けます。
(これが <pre>要素だけで書かせる 他のシンタックスハイライター と違うところ なんだって)

そのほかのメリットは、
新要素・新プロパティに対応。言語数が多い。軽い。
「ハイライト行」をまとめて書けたりと、使い勝手もイイです。

一応デメリットは、<pre> と <code> で書くので、SyntaxHighlighter より記述が長く感じます。
また、タイトルを表示できない(SyntaxHighlighter は preの title属性でタイトルを表示できた)ので、ちょっと不便かな。JS自分で書ける人はできるんでしょうけど。
そして、 IE6 〜 8 は非対応だそうです。(もう要らないか)

Prism の導入準備

Prismダウンロードページで、自分に必要なものをカスタマイズしてからダウンロードするようになっています。(不要なダウンロードをしないようになってる)
JavaScriptファイルCSSファイルがダウンロードされます。

Prism のダウンロードページはこちら。
prismjs.com/download.html

ダウンロードページで「圧縮レベル」を選ぶ

まずはダウンロードするファイルの「圧縮レベル」を選びます。

要はミニファイ(インデントや改行が詰められていて軽い)されているかどうか。
JavaScript・CSSファイルを、自分で編集するなら「Development version」を選択。
編集せずにそのまま使うなら「Minified version」を。
ミニファイのほうが容量が小さくなります。(ミニファイして無くても相当軽いけど)

テーマ(スタイル)を選ぶ

次に「テーマ(スタイル)」を選びます。見た目の装飾です。
7種類用意されています。

7種類のテーマのプレビューは、左側の「縦に並んだ◯」のどれかを選択して↑、このページの一番下で見れます。(このサイト、見にくい。非デザイナーが作ったんでしょうね)

または Test drive(テストドライブ)ページで、 コードを入力してみたり、いろんな言語とテーマを選んで プレビューを確認できます。

使用する言語を選ぶ

ダウンロードページでの続きです。
「使用する言語(Languages)」を選びます。
127言語が用意されています(2017年11月現在)

プラグインを選ぶ

最後に「プラグイン(Plugin)」を選びます。
プラグイン名をクリックすると、そのプラグインの解説ページに飛べます。

最初の2つ「Line Highlight(ライン ハイライト)」と「Line Numbers(ライン ナンバーズ)」はゲットをオススメします。

Line Highlight(ライン ハイライト)」は、行をハイライトする。
Line Numbers(ライン ナンバーズ)」は行番号を表示するプラグインです。

CSS と js をダウンロード

必要なモノを選択し終わったらダウンロードします。
JavaScriptファイルと、CSSファイルが別々にダウンロードできるようになっています。

これは思いのほか効率的!
あとでテーマを変えたくなったら「CSSファイル」だけ、プラグインを追加したければ「JavaScriptファイル」だけをダウンロードすればいいので。

「prism.js」「prism.css」がダウンロードされます。

Prism の設置

HTML上に「prism.js」「prism.css」を設置します。

「prism.css」は、普通に <head>要素内に <style>要素で読み込ませます。

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <link href="css/prism.css" rel="stylesheet">
  </head>

「prism.js」は、<body>の一番最後に置きます。
<pre>や <code>要素を読み終わってからレンダリングさせるため。本文の最後に。

    <script src="js/prism.js"></script>
  </body>
</html>

もうちょっと詳しい設置方法は、こちらをご覧ください。
Basic usage - Prism

Prism の基本の使い方

基本の使い方は、下のように <pre>要素の中に <code>要素を入れて、<code>要素に「class属性」で「language-xxxxというカタチで「言語」を指定します。

<pre><code class="language-markup">HTML</code></pre>
<pre><code class="language-css">CSS</code></pre>
<pre><code class="language-js">JavaScript</code></pre>

これは W3C が推奨する HTML5 での「ソースコード」用のマークアップそのままです。

これだけでソースコードが色分けされて表示されます。
行番号や 任意の行をハイライトさせるには「プラグイン」が必要。プラグインの使い方は記事後半で。

Prism の言語のリスト

Prism では「HTML」は <code class="language-markup"> と指定します。
その他はだいたい通常の略称っぽい。

この language-xxxx の「xxxx」の部分のリストはこちらです。(クリックで開きます)

<pre> の属性でプラグインを使用する

プラグインをダウンロードすれば、さまざまな拡張機能を使えます。
試してみたモノをいくつか紹介します。

行番号を表示する(Line Numbers)

プラグイン「Line Numbersをダウンロードして使います。
(プラグインはすべて「prism.js」に組み込まれます)

<pre>要素class属性で「line-numbers」と指定することで 行番号が表示されます。

<pre class="line-numbers">
<code class="language-markup">some HTML code</code></pre>

<pre class="line-numbers">
<code class="language-css">some CSS code</code></pre>

最初の行番号は「1」以外にもできます。
<pre>要素 data-start属性で「数値」を指定することで、その数値の行からナンバリングされます。

<pre class="line-numbers"  data-start="5">
<code class="language-markup">some HTML code</code></pre>


マイナスの値も指定できます。

<pre class="line-numbers"  data-start="-7">
<code class="language-markup">some HTML code</code></pre>


行をハイライトする(Line highlight)

プラグイン「Line highlightをダウンロードして使います。

<pre>要素data-line属性で「数値」と指定することで、その数値の行がハイライト表示されます。

<pre class="line-numbers" data-line="1">
<code class="language-markup">some HTML code</code></pre>


「数値」の指定方法
・連続した行の場合:「1-5」といった具合で「ハイフン」でつなぎます。
・離れた行を複数:「2,6,18」といった具合で「カンマ」でつなぎます。
・合わせ技も可能:「1-5,18,22-26」といった指定もできます。

<pre class="line-numbers" data-line="1,4-6">
<code class="language-markup">some HTML code</code></pre>




コメントテキストに任意のリンクを作る(Autolinker)

プラグイン「Autolinkerをダウンロードして使います。

このプラグインは「URL」と「e-mail」は自動的にリンクを貼ります。

さらに コメントテキスト内に任意のリンクを貼ることができます。
[リンクのテキスト](https://ex.com/)
というカタチで書きます。(これは Markdown構文というモノ)

下のプレビューでは、「ほんっとにはじめてのHTML5とCSS3」の部分にリンクを指定しています。

<!--このプレビューでは下記のテキストにリンクを貼っています<br>
[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)
リンクを貼れるのは「コメント内」に限ります。-->

このように書いています。

[「ほんっとにはじめてのHTML5とCSS3」](http://honttoni.blog74.fc2.com/blog-entry-292.html#pt5-3)

Markdown構文の「タイトル」( [リンクのテキスト](https://ex.com/ "タイトル") )には対応していませんでした。

HTMLのコメントだけじゃなく、他の言語のコメントテキストでもできます。

言語を表示する(Show Language)

プラグイン「Show Languageをダウンロードして使います。

これは、何もしなくても自動的に言語を左下に表示してくれます。

コードにマウスオーバーするとプレビューする(Previewer各種)

まずはベースになるプラグイン「Previewer: Baseをダウンロードし、必要なプラグイン「Previewer: ◯◯」をダウンロードしてセットで使います。
下記の種類があります。

Previewer: Color
「色指定」部分にマウスオーバーすると、ポップアップで「色」をプレビューします。
どんな言語でも「色指定」の箇所に反応します。

Previewer: Gradient
「グラデーション」指定部分にマウスオーバーすると、ポップアップで「グラデーションカラー」をプレビューします。

Previewer: Easing
「イージング」指定部分にマウスオーバーすると、ポップアップで「イージング」をプレビューします。

Previewer: Time
スタイルで「時間」を指定した部分にマウスオーバーすると、ポップアップで「速度」をプレビューします。

Previewer: Angle
「角度」を指定した部分にマウスオーバーすると、ポップアップで「角度」をプレビューします。

その他のプラグイン

そのほか、
File Highlight(外部ファイルをハイライトする)
Keep markup(コード内に <mark>要素を使って強調できます)
Toolbar(「コードを選択」などの機能ボタンを作ったりつけたりできる)
など、おもしろそうなプラグインがいろいろ。

このほかのプラグインは、プラグイン インデックスから、各説明を見られます。

CSSを編集してオリジナルのスタイルに

この「ほんっとに..」では、テーマ「COY」の CSSをアレンジして使っています。

「Prism.css」は、ダウンロードしたテーマのまま一旦ブラウザプレビューしてみて、Web開発ツール(SafariのWebインスペクターなど)で CSSの構造を確認して、自分の好きなスタイルに変更します。

この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

関連記事

テーマ : webサイト作成
ジャンル : コンピュータ

スポンサーリンク

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.