タグ:ホームページ

ハイライト表示とは、こういうの。本文でないのがひとめわかる、表示スタイル。ソースコードやレシピの表示スタイルによく使われる。

/*---------------------------
サンプル
------------------------------*/
<?php
$mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

このハイライト表示、ブログにそのまま記述すると、本文と同等に表示される。キーボードのタブによるインデント(字下げ)もできない。前述を例にしたのが下記。

/*---------------------------
  サンプル
------------------------------*/
<?php
 $mysql_con = mysql_connect ($dbhost,$dbuser,$dbpass);
?>

これまで、ここブログでソースコードを記述する機会は、さほどでなかったが。今後あるかもということで、ブログでハイライト表示を使う方法を調べてみた。

はてなブログには、簡単な方法があるらしいが、ここはライブドアブログ。jsを使えるようにすればいいんじゃない?と、やってみたら簡単だったので、まとめ。

以下、ライブドアブログでの方法。(ホームページでの使い方は、文末に記載)

Javascriptライブラリを読み込む
ライブドアブログでハイライト表示を使うには、Javascriptライブラリ「Google Code Prettify」を読み込む。

1.左メニュー「ブログ設定」をクリック。

2.「ブログの設定」の「デザイン/ブログパーツ設定」内「カスタムjs」をクリック。
1606255
3.カスタムjsウィンドウのタブ「head内」に、「Google Code Prettify」を読み込むコードを記述。
1606256

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
ボタン「保存する」をクリック。

使いたいブログ記事を作成し、ハイライト表示タグを記述
1.ブログメニュー「記事を書く」をクリック。

2.記事ウィンドウ内「HTMLタグ編集」をクリック。ハイライト表示したい箇所を、以下の括りで記述。
<pre class='prettyprint'>
ここにソースコードを記述
</pre>
3.「HTMLタグ編集」をクリックして通常表示に戻すと、上の画像のような表示がされる。「ここに~」の部分を編集。

ホームページでの使い方も同様。<script src~</head>前に記述、<body>内に、<pre~タグ括りで利用。括りの中を編集。

以上、ご参考になれば幸いです。

※この記事は、「ソースコードを載せるには」として作成したが、わからんという意見を多々もらったので、「ハイライト表示を使うには」として修正。

【関連リンク】
JavaScriptライブラリのホスティングについて - ライブドアブログのヘルプ(PC向け)
「jsライブラリを提供していたが止めたので、今後はGoogleなどのサービスを利用してね」というので、方法にピンときた。

google-code-prettify を使ってシンタックスハイライト | Web Design Leaves
ダウンロードして利用したい場合に。レンタルサーバーある人向け。

Google Code Prettify導入が超絶簡単になっていた | きほんのき
上記のダウンロード利用を一通りやった後。レンタルサーバーない人向けに、記事を書こうと検索してみっけ。

google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ: ある SE のつぶやき
わかりやすい。

a0001_001899
AptanaStudio3を試用したブログ記事が、よく見られてます。
試しに使って、やめた経緯を記した記事も。
フリーのHTMLエディタが、これほど注目されているとは。

HTMLエディタを使う人が、それほど多いのだとすれば。
HTMLコーディングをしはじめた人も多いだろう、ということで。
HTMLコーディングについて、いくつか進言。

名称の区切りは、「-」(ハイフン)でなく「_」(アンダーバー)を使う。
ハイフンで区切ると、ダブルクリックでは連語として認識されない。
コピーするには、いちいちドラッグ選択しないといけないので。
手間がかかるし、間違いも起きやすいので、アンダーバーを。

CSSは、上書きせず分割する。
上書きの頻度が低い場合は、分割しないほうが効率よいです。
ページ数が少ない、階層が浅い、一定のルールがある場合も同様。
ソースの後追いが困難にならないよう、無作為な上書きはしない。

名称は、見た目でなく内容で付ける。
よく言われる例として、左右、色、順の使用があります。
「wrap_left」、「font_red」、「list_1」など。
見た目を変えたら、名称も変えないといけない命名はしない。

margin、paddingプロパティは、部分でなく全体で扱う。
上書きしたくない部分がある場合は、部分で扱うのが適正です。
そうでなければ、「top」だけ設定するなど、部分扱いはしない。
よくあるレイアウト不具合の原因に、この部分使いがあります。


以上、思いつくところを挙げました。

AptanaStudio3について、追記すると。
Dreamweaverを使いこなした上での選択なら、ともかく。
そうでなければ、Dreamweaverを使ってからにしては。

Dreamwreaverを勧めるには、わけがある。

例えば、タグ。
「<div>」で記述を始めて「</」と入力すれば、自動で「</div>」と入力されるので。
時間の短縮になり、閉め忘れも防げます。

コードチェックには、「バリデート」という機能があるので。
タグやシンタックスエラー、標準仕様など。
簡単にチェックして、修正することができます。

なにより、汎用的なHTMLコーディング力が付くと思います。

テンプレートを見ると、大体が区切りはアンダーバー。
プロパティを一行で設定せず、改行して記述してあるので。
作っていてわかりやすいし、改修も容易かと。


そうそう、HTMLコーディングについてもうひとつ。

最新技術を使うのは、基本を使いこなしてからがおススメ。
ブラウザの種類やバージョンなど、環境を限定する場合が多いので。
普及する時期を待ってからのほうが、効率良いです。


かく言うわたし。
個人サイトでは、テキストエディタで手作りした頃からのソースを継承。
改修しようと思うほどに、最初が肝心とつくづく・・・。


ご参考になれば幸いです。


【関連リンク】
「Aptana Studio 3」を試す:のり記
「Aptana Studio 3」を試す(2):のり記
年賀状を書く:のり記
年賀状の記事もアクセスされているわけ、今頃わかりました。

ドキュメントをバリデートする方法 (Dreamweaver CC)
バリデートについて。

写真素材 足成【フリーフォト、無料写真素材サイト】:投稿者別画像一覧:工藤隆蔵
使わせていただきました<(__)>

↑このページのトップヘ