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

LAGRANGE BLOG

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


スポンサーリンク

□サイト内検索:

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

暇つぶしからやりこみまで楽しめる今流行りのスマホゲームランキングを紹介

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

人気・話題のおすすめマンガが読める「マンガアプリ」

マンガPark
・3,000話がコイン消費無しの完全無料!
・毎日2回もらえるFREEコインで毎日無料!
・白泉社の全レーベルが集結!約500作品40,000話配信中!
・曜日毎に毎日更新される連載作品多数!
・マンガParkでしか読めないオリジナル作品連載中!
マンガParkの”無料DL”はこちら >>
マンガUP
・スクエニが贈る、毎日更新の無料の漫画アプリ!
珠玉の名作から大人気連載中のマンガまで、基本無料のマンガを楽しもう! 毎日 10 作品以上更新。常時 100 タイトルも読める国内最大級の漫画アプリです。
マンガUPの”無料DL”はこちら >>
マンガBANG
・AppStoreブックカテゴリ1位獲得! 1000万DL突破の無料漫画アプリです!人気漫画が多数掲載中!
「金色のガッシュ」「BLOODY MONDAY」、「ゴッドハンド輝」、「ドンケツ」、「エリアの騎士」、「ウロボロス」、「BTOOOM!」「ミナミの帝王」、「賭博黙示録カイジ」、「クロカン」「天 天和通りの快男児」などめちゃ面白い100作品1,000冊以上のコミックが無料配信中です!
マンガBANGの”無料DL”はこちら >>
マンガワン
・小学館のマンガアプリ!100以上の作品が毎日日替わりで更新!
オリジナルマンガを始め「少年サンデー」「週刊スピリッツ」のマンガを配信中。配信タイトル例は『出会って5秒でバトル』『ケンガンアシュラ』『ケンガンオメガ』『血と灰の女王』『最強職《竜騎士》から初級職《運び屋》になったのに、なぜか勇者達から頼られてます@comic』 『プロミス・シンデレラ』『からかい上手の(元)高木さん』など
マンガワンの”無料DL”はこちら >>
マンガMee
・日本屈指の有名少女漫画タイトルが結集した集英社の少女マンガアプリ!
23時間に1回回復する1話読めるチケットのほか、往年の名作が読めます。 【掲載中のオリジナル作品】・鬼獄の夜
 ・君が死ぬまであと100日
・殺したいほど、アイしてる
 ・奈落の花・店長になんて惚れません!
・蘭と葵
・俺たち乙女ゲーボーイズ
・サレタガワのブルー
・ツッパリくんは報われない
・ハタチまでになんとかシたい


マンガMeeの”無料DL”はこちら >>
ヤンジャン!
・「週刊ヤングジャンプ」本誌連載作品から、「となりのヤングジャンプ」連載作品を配信する集英社のマンガアプリ!
【掲載マンガ例】キングダム、東京喰種 トーキョーグール:re、テラフォーマーズ、ゴールデンカムイ、かぐや様は告らせたい〜天才たちの恋愛頭脳戦〜など
'ヤンジャンの”無料DL”はこちら >>
 

  1. caraldok より:

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

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

comment

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

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

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

 

アプリレビュー

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

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

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

おすすめ記事

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

-web制作
-

スポンサーリンク

Copyright© LAGRANGE BLOG , 2019 All Rights Reserved.