ROROのWEB技術・子育て・ガジェット通信

本WEBページは2児の息子を持つROROの子育てに伴うメリット・デメリットを丸裸にしていきます。例えば旅行であったり家系であったり、どんな生活をしているのかをお楽しみください。また子育ての便利グッズの紹介、ROROの趣味であるガジェットやゲーム情報や勉強なども紹介します。色んなコンテンツをお楽しみくださいね!

webページのプログラムソースに行数を表示する方法

date:2018/8/19



構文ハイライトをしてくれるcode-prettifyを利用しましょう

Googleによって開発されたcode-prettifyを用いると、プログラムの構文をハイライトしてくれます。
こちらはデータをダウンロードして利用することもできますし、リンクすることで利用することもできます。CSSとJavascriptで利用可能です。


利用方法

head内に以下コードを記載するだけで利用環境は整えます。但しそのままでは色々と不都合があると思いますので、多少カスタマイズを行います。

htmlのソースへの記載


<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

prettyprintで利用します

classとしてprettyprintを記載するだけです。


<pre><code class="prettyprint">
.menu_title{
font-size:30px;
font-family:AlexBrush-Regular_font;
color:#173c77;
margin:0 0 5px 0;
font-weight:bold;
}
</code></pre>

構文ハイライトをしてくれるcode-prettifyを利用しましょう


続いてはハイライトが出来ましたので、せっかくなのでテキストエディタのように行番号の振り方を学んでみましょう。


ソースコードに行番号を表示する

行番号をフルには、先ほどのprettyprintにlinenumsを追加するだけです。


<pre><code class="prettyprint linenums">
.menu_title{
font-size:30px;
font-family:AlexBrush-Regular_font;
color:#173c77;
margin:0 0 5px 0;
font-weight:bold;
}
</code></pre>

ただそのままだと、一行毎のハイライトの色が変更できませんし、5行毎しか採番されませんので不都合があります。



なのでCSSをカスタマイズします。今回の方法はリンクから呼んでいますので、自前のCSSを後に宣言することで5行毎のSTEPから全ての行にナンバリングできるように上書きしちゃいましょう。


全ての行に行番号を振る方法

以下コードをCSSを追記します。



li.L0,li.L1,li.L2,li.L3,li.L4,li.L5,li.L6,li.L7,li.L8,li.L9 {
list-style-type: decimal;
}
li.L1,li.L3,li.L5,li.L7,li.L9 {
background: #d4d4d6;
}
いかがでしょうか?
関連記事

Category

Latest Game News

▪️日本語版『スカイリム』が発売された日。10年経ったいまでも遊び続けられているオープンワールドRPG。「膝に矢を受けてしまってな……」のネットミームも超有名【今日は何の日?】@ファミ通(2021/12/08  04:00)▪️Switch本体+『あつ森』セットがAmazonで明日(12月8日)より発売。本体収納ポーチ、ソフト用カードケースなどのSwitch関連商品も同梱@ファミ通(2021/12/08  00:00)▪️PS5『HELL LET LOOSE』パッケージ版が1月13日発売。DualSenseワイヤレスコントローラーによる、臨場感あふれる戦場を体験せよ@ファミ通(2021/12/08  00:00)▪️手に汗握るレースを体験できるモータースポーツアクション『GRID LEGENDS』が2022年2月25日に発売決定。疾走感あふれるゲームプレイ動画も公開!@ファミ通(2021/12/08  00:00)▪️『あつ森』一番くじが明日(12月8日)より発売。作業台型のキッチンタイマー、タヌポートATM型の貯金箱、ジョニーのぬいぐるみなどがラインアップ@ファミ通(2021/12/08  00:00)▪️『すみれの空』Mac版が配信スタート&iOS版の移植も発表。人見知りの少女とイタズラ好きな精霊の特別な一日を描くアドベンチャー!@ファミ通(2021/12/08  00:00)▪️PS5『アンチャーテッド トレジャーハンターコレクション』2022年1月28日に発売決定! シリーズ初のPC版も@ファミ通(2021/12/08  00:00)▪️任天堂公式サイトに『スマブラ』シリーズすべての参戦ムービーを総まとめした特集ページが公開。桜井政博氏の解説コメントとともに歴史を振り返る@ファミ通(2021/12/07  20:00)▪️Switch『プロスピ2021』無料アップデートが12月9日(木)に実施。藤川球児&城島健司などの名選手が“スタープレイヤー”モードで使用可能に@ファミ通(2021/12/07  20:00)▪️『ルーンファクトリー4スペシャル』PS4、Xbox One、PC向けDL版が発売開始。最大50%オフで購入できるダウンロード版の期間限定セールも実施@ファミ通(2021/12/07  20:00)▪️【FF14】『暁月のフィナーレ』がついに発売。星と命を巡る物語“ハイデリン・ゾディアーク編”のフィナーレを見届けよう!@ファミ通(2021/12/07  20:00)▪️『ダークソウル』や『SEKIRO』の背景・キャラクター制作秘話が語られた、フロム・ソフトウェア流のグラフィック制作のこだわり【CEDEC+KYUSHU 2021】 @ファミ通(2021/12/07  16:00)▪️Switch『ぎゃる☆がん だぶるぴーす』が2022年3月17日に発売。告白してくる女の子を眼力で昇天させていく新感覚シューティングゲーム@ファミ通(2021/12/07  16:00)▪️2021年11月ソフト・ハード売上ランキング速報。『ポケモンBDSP』が175.1万本を突破し月間首位を獲得@ファミ通(2021/12/07  16:00)▪️【テトリス99】『マリオパーティ スーパースターズ』とのコラボカップが12月10日16時より開催。ポイントを集めてコラボテーマを手に入れよう@ファミ通(2021/12/07  16:00)▪️【PS Now】12月は『GTAIII:決定版』『FFX/X-2 HD Remaster』など期間限定タイトルを含めた3タイトルが新規追加@ファミ通(2021/12/07  16:00)▪️オープンワールド推理ADV『Sherlock Holmes Chapter One』はシリーズで最も速く売れたタイトルに。PS4/XB1版は2022年第1四半期の発売を目標@ファミ通(2021/12/07  16:00)▪️『テイルズ オブ』シリーズの危機を救う、『テイルズ オブ アライズ』で挑戦した継承と進化【CEDEC+KYUSHU 2021】@ファミ通(2021/12/07  12:00)▪️『戦場のフーガ』高い戦術とシリアスなストーリーが融合したシミュレーションRPG。過酷な戦争に挑む子どもたちの物語の概要と魅力をおさらい@ファミ通(2021/12/07  12:00)▪️『テイルズ オブ アライズ』プレイヤーアンケート実施! 富澤Pへの質問も募集。アンケート結果&富澤Pインタビューは週刊ファミ通1月13日発売号に掲載@ファミ通(2021/12/07  12:00)▪️『スマブラSP』が発売された日。まさかの“全員参戦”! DLCでの追加ファイター参戦動画も毎回お祭りに【今日は何の日?】@ファミ通(2021/12/07  08:00)▪️『バーチャファイター eスポーツ』DLC第2弾『龍が如く』コラボパックが12月8日に配信。さらにJeSUのプロライセンス発行認定タイトルに決定@ファミ通(2021/12/07  00:00)▪️『モンハンストーリーズ2』公式LINEスタンプが登場。ナビルー「オース!」、エナ「素敵ね」など使いやすい40種が収録@ファミ通(2021/12/07  00:00)▪️新作ロボットSRPG『Relayer(リレイヤー)』の最速体験会とトークイベントが開催決定! トークイベントには声優の明坂聡美さん、本多真梨子さんなどが登壇@ファミ通(2021/12/07  00:00)▪️『スタマス』高垣楓やストーリーなどが追加される“DLCカタログVol.3”が12月9日配信決定@ファミ通(2021/12/07  00:00)▪️『ニーア オートマタ』の美麗なビジュアルを使用した1000ピースパズルが2022年4月に発売。パズルのりとのりへらもセットで付属@ファミ通(2021/12/06  20:00)▪️『ブレイブルー セントラルフィクション』Steam版、『ブレイブルー クロスタッグバトル』PS4・Steam版でロールバックネットコードが2022年内に実施決定@ファミ通(2021/12/06  20:00)▪️『十三機兵防衛圏』Switch版で追加される兵装26種が一挙公開。主人公ひとりにつき2種の兵装を新たに選択可能に@ファミ通(2021/12/06  20:00)▪️『バグ・フェイブルズ ~ムシたちとえいえんの若木~』小さな生き物たちの大きな冒険を描くRPG【とっておきインディー】@ファミ通(2021/12/06  16:00)▪️『ギルティギア ストライヴ』隻眼・隻腕の女剣士“梅喧(ばいけん)”が2022年1月下旬に参戦決定。ティザー映像も公開@ファミ通(2021/12/06  16:00)

Latest Post

23337views

クリスマスプレゼントの購入

育児シンカリオン

さてもう直ぐクリスマスですね。早速ですが、既に購入してしまいました。何を購入したかというと・・・シンカリオンの「ブラックシンカリオン」のプラレールです!!これの何がすごいって?それは何と言っても、先頭車両に動力がなくても動く代物です!!。他のシンカリオンはそもそも動かないんですよね。動いて返信してっ...2018/8/19

326641views

webページに独自のフォントを利用する

ホームページ作成PHPのTIPS&便利な利用方法htmlCSSTips@font-facefont-familyフォント

本日はWEBページで外部フォントを利用する方法です。任意の位置に、自分のコードを導入することが出来ます。例えば以下のようにフォントを変更することが可能です。Let's use Original font@font-faceで外部フォントを利用する独自のフォントを使うには@font-face...2018/8/18

26923views

2020年度のプログラム必修化に備える!子供向けパソコンの選び方とは

育児プログラム必修化プログラムパソコン

記事は製作中です。下記はhttps://dot.asahi.com/aera/2016102800135.html?page=1からの紹介です。 今年3月に発表された新学習指導要領で、2020年度から小学校でプログラミング教育が必修化されることが明示されました。数年前からプログラミング教育への関心は...2018/8/8

11658views

年代別!2018年度の子供のクリスマスプレゼントのオススメ

育児クリスマスプレゼント

この記事は作成中です。また今年もやってきたクリスマス。お子さんにはどんなプレゼントを上げますか?悩ましい問題ですよね。皆さんに年代別で今年の流行りも含めながらオススメのプレゼントを紹介していきますので、ぜひ参考にして頂ければと思います。0〜1才★男の子編2才★男の子編第一位2才になって来たらそろそろ...2018/8/6

419843views

NEOGEO miniを買うなら楽天に急げ!

育児ゲームガジェットネオジオミニ

【aff:2,1】NEOGEO miniを買うなら楽天に急げ!楽天ならまだまだ在庫がありますよ。しかも・・・自分の場合はamazonで予約して入荷予定が8末で予約してしまいました・・・なので首を長〜くして待っています。さてネオジオミニ ですがどんなソフトが収集されているのでしょうか?ネオジオミニ に...2018/8/6

10403views

preタグ内のコードのタグをそのまま表示させる方法

育児PHPのTIPS&便利な利用方法htmlPHP正規表現preg_match_allstr_replaceprecode

例えばホームページを作成する際にプログラムコードをそのまま表示させたい場合、preタグ内であってもタグは表示できません。あくまでpreタグ内は改行・空欄がそのまま表示されるだけです。なので、preタグ内をプログラムで表示させたい場合、HTMLの特殊文字を変換しないといけません。いちいち面倒なので指定...2018/8/6

42020views

PHPで配列のキーと値を取得する

ホームページ作成PHPのTIPS&便利な利用方法TipsPHPforeachexplode

PHPの配列のキーと値を同時に取得することで、BLOGサイトのように、URLではカテゴリーのID(配列のキー)で、リンクの形式は配列の値で同時に表示することができます。実施したい内容は以下のイメージです。foreachの構文を見てみましょう。foreach(変数 as キー => 値){ pri...2018/8/5

949827views

徹底解剖!Whatsko 3022種ゲーム贈 ポータブルゲーム機 16G拡張バージョンのリスト FC MDレトロ懐かしゲーム機を紹介

GAMEエミュレータガジェット

さて前回紹介を行った「Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)」でしたがなかなか面白いものでしたので、今度はW...2018/8/5

28333views

徹底解剖!Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)

GAMEエミュレータガジェット

amazonで怪しい商品を買ってみました。それはこれです。Goolsky Retromini ゲーム コンソール 32ビットポータブル ミニ ハンドヘルド ゲーム プレーヤー 内蔵40ゲーム 子供向け GBA クラシック ゲーム ベスト ギフト(多言語対応 日本語 中国語 英語 韓国語)このゲームは...2018/8/5

10322views

真・女神転生4北米版のプレイ日記4

GAME真・女神転生4プレイ日記ゲーム英語北米版ゲーム中継

さて、メインクエストをどんどん進めていきます。するとNavarreが行方不明ということで助けに行きます。先の展開的に多分危ない方向になるんだろうなぁと思いつつクエストを進めます。真・女神転生4では、複数の敵が連なったバトルがあります。全体魔法で一気に片付けないと全滅の恐れがあります!敵が叫び声をあげ...2018/2/4

PAGE TOP

(C)ROROのWEB技術・子育て・ガジェット通信