web制作

ソースコードをそのままブラウザに表示する方法

スポンサーリンク

2011/02/03

-web制作
-

はじめに

Web関連のBLOGをまとめるときに良くソースをペリッと貼付ける機会が多いので
改めて手法を調べてみました。
ss

スポンサードリンク

<pre>を使用する

<PRE>タグはPreformatted Text(整形済みテキスト) の略で
<PRE>タグで囲った中身をそのまま出力します。

preタグ内でも「<」「>」で囲った内容はhtmlと見なされます。
そのため

  • 「<」を「&lt;」
  • 「>」を「&gt;」

に変換する必要があります。
「<」「>」はエンティティ文字と呼ばれます
変換の祭はタグの数も多く大事になりますので

を使用したり、Dreamweaverのデザイン画面に貼付けたりします。

ちなみに、エンティティ文字には意味があります

「&lt;」 「<」 less thanの略。(〜以下)
「&gt;」 「>」 greater thanの略。(〜以上)

preタグで囲ったSample

<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>

<code>を使用する

<code>〜</code>で囲んだテキストが、プログラムのソースコードであることを意味します。
改行やtabを表現したい場合は<code>の外を<pre>で囲みます。
preタグと同様に「<」「>」をエンティティ文字に置き換える必要があります。

preタグ,codeタグで囲ったSample


        <? echo $test; ?>
<h1>Header1</h1>
<h2>Header2</h2>
<h3>Header3</h3>

<xmp>を使用する

<xmp>は囲った中身をhtml化しません。
エンティティしなくて楽なのですが、このタグは HTML4.0 で廃止され,代わりに <pre> を使用することが推奨されています。

xmpタグで囲ったSample

</p> <h1>Header1</h1> <h2>Header2</h2> <h3>Header3</h3> <p>

google-code-prettifyを使用する

google-code-prettifyは、コードをハイライト表示してくれるJavaScriptライブラリです。
google-code-prettify - Project Hosting on Google Code
Code licenseは Apache License 2.0 です。

google-code-prettifyを読み込み、preタグにclass=prettyprintを加えるだけのラクチンライブラリです。

Sample

int x = foo();  /* This is a comment  This is not code
  Continuation of comment */
int y = bar();

SyntaxHighlighterを使用する


syntaxhighlighter - Project Hosting on Google Code
Code licenseはGNU Lesser General Public Licenseです。
対応言語の多いライブラリです。
本家のページではVersion3.0が公開されています。

スポンサードリンク

おわりに

他にもJavascriptを使用したライブラリ、WordpressなどのCMSプラグインがあります。
ライブラリは色々使って感触を知るしかないですね。

参照URL

<

ul>

スポンサードリンク

-web制作
-

おすすめゲーム「ステラクロニクル」

SDキャラのモーションで描かれる100万字以上の濃厚ストーリー『ステラクロニクル』登場
2.5Dで作られた美しいマップ,スライドを使った攻撃アクション、100以上のスキルによるカスタム育成、 DIY自由なお屋敷!かわいいキャラクターからお気に入りをそだてあげよう!

キャラクターのデザイン良◎のスライドコマンドRPG!

「ステラクロニクル 」の"無料ダウンロード"はこちら

 

-web制作
-

Copyright© LAGRANGE BLOG , 2020 All Rights Reserved.