おすすめのVOD・スマホアプリ・スマホゲームアプリの紹介サイト

LAGRANGE BLOG

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


スポンサーリンク

web制作

-web制作
-

□サイト内検索:

投稿日:2011/02/03 更新日:

人気【常時更新】ゲーム好きは一度はプレイしたい!面白くてハマるおすすめのスマホゲームランキング

スポンサーリンク

はじめに

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

スポンサードリンク
スポンサードリンク

<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制作
-


  1. caraldok より:

    文字列 → 数値実体参照変換
    http://yasu.asuka.net/orkut/conv.html

    このサイト愛用しています!

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ストア高評価4.5!! ユーザーが100万人を突破!本格シミュレーションRPGの不朽の名作”ラングリッサーシリーズ”の新作「ラングリッサー モバイル」

ラングリッサーシリーズを経験していると懐かしい!未プレイでもラングリッサー自体の世界観が楽しめるシミュレーションRPG

ラングリッサー原作のシステムを引き継いで楽しめる!「ラングリッサー モバイル」配信開始

「ラングリッサー モバイル」の"無料ダウンロード"はこちら

 

スマホアプリ攻略記事特集

Android,iPhoneスマホゲームアプリの攻略記事です。
他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

 

アプリレビュー

おすすめスマホゲーム・アプリ

最新スマホゲーム攻略はこちらから!

他にもたくさんアプリ攻略情報あり!他の Android,iPhoneゲームアプリ攻略情報を見る >>

おすすめ記事

ボヘミアン・ラプソディ 1
2
ゆうべはお楽しみでしたね 3
4
5
6
7
8
9
10
11
12

-web制作
-

スポンサーリンク

Copyright© LAGRANGE BLOG , 2019 All Rights Reserved.