HTML:ソースコードをページ上に貼り付ける。

<!DOCTYPE html> <html lang = "ja"> <head>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133409287-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-133409287-1'); </script>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-6918386144875495", enable_page_level_ads: true }); </script> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width"> <title>HTML:ソースコードをページ上に貼り付ける。</title> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@fukarararu" /> <meta property="og:url" content="https://fuuno.net/web/tag/tag.html" /> <meta property="og:title" content="HTML:ソースコードをページ上に貼り付ける。" /> <meta property="og:description" content="〽︎タグもろとも表示させたい。" /> <meta property="og:image" content="https://fuuno.net/web/tag/twitter.png" />  <link rel = "icon" type = "image/x-icon" href = "https://fuuno.net/main_img/favicon.ico"> <style> /*--------------ベースstyle。12/24AM更新。---------------------------------------*/ html{max-width:1000px; margin: 0 auto; } body {font-family:'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif; width:100%; margin-left:0; font-size:130%; } img{width:80%; padding-left:10%; } /*-------------メディアクエリ。-----------------------------*/ @media only screen and (max-device-width: 480px) { body{ font-size:4.9vw; } header{ line-height:1.4; font-size:0.9em; } img{width:90%; padding-left:5%; } } /*.gamegamen{width:80%; margin-left:10%; } */ .komidasi {background-color:coral; text-align:center; } header {background-color:aquamarine; padding:1em; /*-----------headerにbackground-imageを設定----------------------- background-image:url(""); background-size:cover; ---------------------------------------------------------------*/ } .codesample { font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; line-height: 1.7; border: solid 1px; padding:0.5em; font-size:100%; font-weight:800; background-color:beige; /*margin-top:1em;*/ margin-bottom:1em; color:black; word-wrap:break-word;/*-----確実に改行させる----------*/ /*margin-left:5%; margin-right:5%;*/ /*padding-top:-2em;*/ } /*---------------------------------------------------------------*/ /*--------pの頭に◼︎をつけ、２行目以降インデントさせたい場合。--------------- p{ padding-left:2em; text-indent: -1em; } -----------------------------------------------------------------*/ p{ padding:5%; } /*----------旧ホカベン用のパンくず-----------------------------------*/ .link { color:cadetblue; display: inline-block; margin:3em; margin-bottom:1em; margin-top:1em; } /*-------------こっから記事リストのカスタマイズ。------------------*/ .kijilist{ list-style:none; padding-left:0; } .kijilist li{ /*height:6em;*/ border:solid 2px; background-color:floralwhite; } .kijilist a { text-decoration:none; color:black; } .kijilist a img { height:auto; width:6em; float:left; margin-right:3em; margin-left:0; padding-left:0; /*liのimageにはそもそもpaddingが設定されているみたいだ。だからpadding-leftを０にする。！！！そしてaspect fitさせること！正方形のViewに。 */ } .kijilist li a strong{ color:#000; display:block; padding-top:0.6em; font-size:1.2em; margin-bottom:-0.6em; display:flex; } .kijilist li a p { padding-left:0; text-indent:0; color:#000; } /*---------------------------------------------------------------*/ /*--------------記事リストプロトタイプ。------------------------------*/ .kijilist_pr{ list-style:none; padding-left:0; } .kijilist_pr li{ height:6em; border:solid 2px; background-color:floralwhite; padding:1em; } .kijilist_pr a { text-decoration:none; } .kijilist_pr a img { height:6em; width:6em; float:left; margin-right:3em; margin-left:0; padding-left:0; /*liのimageにはそもそもpaddingが設定されているみたいだ。だからpadding-leftを０にする。！！！そしてaspect fitさせること！正方形のViewに。 */ } .kijilist_pr li a strong{ display:block; font-size:130%; } /*-----------文章の左に画像を載せる。--------------------------------*/ .kaisi:before{ content: ''; display:inline-block; width:4.5em; background-repeat:no-repeat; height:3.0em; background-image:url(""); background-size:contain; vertical-align:middle; margin-left:0.5em; /*-------imgが正方形の場合、テキストとの調整を行う。---------------- margin-right:-0.6em; ----------------------------------------------------------*/ float:left; } /*---------------------------------------------------------------*/ /*-----------------ホカ弁ようパンくずリスト。-------------------------*/ .kuzu h4 { display:inline-block; padding:0.4em; border:solid 1px; } @media only screen and (max-device-width: 480px) { .kuzu h4{ width:44%; } } .kuzu{ display:inline; text-align:center; background-color:floralwhite; /*なんで真ん中にライン状に表示されるんだ？*/ } .kuzu a { text-decoration:none; } /*visitedの色を黒のまんまで。*/ .kuzu a:visited { color:black; } /*background-positionを右に振りたい時。まだせいこうしていない。 #jikken{ width:50%; position:absolute; position:calc(50%+20px) 0px; } */ /*---------------------------------------------------------------*/ /*------ホカベン用codeSampleの文字色--------------------------------*/ #kime {color:coral;} .hensuu {color:coral;} .atai{color:blue;} /*---------------------------------------------------------------*/ /*iphoneの画面右側に余白ができた時の対処 <body>直下を<wrapper>で囲み、 cssで　「　#wrapper { overflow:hidden } とする。 */ #wrapper{ overflow:hidden; } /*-------------pに角丸長方形。-------------------------------------*/ .kadomaru{ border:solid 2px; border-radius:15px; } /*てんピョロだけのstyle。*/ .tenpyoro{ border-right:solid 3px; border-bottom:solid 3px; border-color:cadetblue; } /*codesampleの出力結果*/ .logkekka{ color:dodgerblue; } /*箇条書きタイトル。*/ .kajotitle{ background-color:darkcyan; color:white; text-align:center; font-weight:600; padding:0.8em; font-size:1.1em; margin-bottom:-2.5em; /*ラベルっぽくしてみる width:50%; margin:auto; margin-bottom:-2.5em; */ } .kajotitle::before { content: ''; display:inline-block; width:1em; height:1em; background:url("../../main_img/kajo_R.png") no-repeat; background-size:contain; } .kajotitle::after { content: ''; display:inline-block; width:1em; height:1em; background:url("../../main_img/kajo_L.png") no-repeat; background-size:contain; } .kajonaiyou { font-size:1.1em; color:darkcyan; font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace; line-height: 1.3; border: solid 2px; padding:0.2em; font-weight:600; background-color:white; margin-top:2em; margin-bottom:2em; } .kajonaiyou p { padding:1em; line-height:1.7em; } /*------------kaisi_02------------------------------------------*/ .kaisi_02 { position:relative; line-height:1.7em; padding:0.9em; padding-left:3.8em; font-size:140%; border-bottom:solid 0.05em gray; /*border-right:solid 1.4vw gray;*/ border-top:solid 0.05em gray; letter-spacing:0.02em; /*background-color:azure;*/ } .kaisi_02:before { position:absolute; left:0.4em; content:""; display:inline-block; width:2.5em; height:2.5em; background:url("../../main_img/fu_icon.png") no-repeat; background-size:contain; margin-top:-0.3em; /* ▲ メディアクエリで書換えようぜ。0.4emで結構しっくり。*/ } /*----------codesampleにつけるラベる。----------------------*/ .codelabel p{ display:inline-block; /*border:solid 1px;*/ padding:0.2em; padding-left:0em; padding-right:1em; font-weight:500; margin-left:0.5em; color:cornflowerblue; } .codelabel { margin-bottom:-1em; } /*--------ブラウザのプレビューに外枠がほしい。-----------------*/ .gamenwaku { border:solid 1px; } </style> </head> <body>  <div class = "katamari">  <div class = "komidasi"> <h3 id = "toplink"><a href = "https://fuuno.net/" style = "text-decoration:none; color:black; ">フーノページ</a></h3> </div>  <header> <h1>HTML:ソースコードをページ上に貼り付ける。</h1>  <p>〽️　タグもろとも表示させたい。</p> </header><br>   </div>    <div class = "katamari"> <h2 class = "kaisi_02"> そのままだとタグが実行されてしまう。 </h2> <p> こんにちは。「ふ」です。<br> <a href = "https://fuuno.net/web/regular_replace/regular_replace.html" style = "text-decoration:none;"><strong>前回</strong></a> は（←なんかシリーズ化してきましたね）正規表現をちょこっと使って、シンタックスハイライトの入り口がちょこっとだけ見えてきました。<br><br> 扨（さて）今度は、webページ上にこんな▼感じでHTMLコードを埋め込んでみたいと思います。コーディングで行き詰まってググった時に、開いたページにはよくcodeが埋め込まれてますよね？ </p> <div class = "codelabel"> <p> ブラウザ </p> </div> <br> <img src = "tag01.png"> <h3 class = "komidasi"> 早速やってみましょう。 </h3> <div class = "codelabel"> <p> HTML </p> </div> <div class = "codesample"> <h1>サンプル</h1> <p> webサイト上でHTMLコードを表示したい。うまくいくだろうか。 </p> <a href = "https://fuuno.net/"> トップページへのリンク </a> </div> <p> そのまんまHTMLを記述してみました。結果はご察しの事だとおもいますが、プレビューすると、 </p> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag02.png"> <p> 当然ながらHTMLタグが実行されてしまい、ブラウザ上には<h1>などのタグは表示されません。 </p>  </div>  <div class = "katamari"> <h2 class = "kaisi_02"> : 特殊文字と文字実体参照。 </h2> <p> HTMLファイル上では「<」や「>」を入力すると、「タグ」として認識されてしまいます。そのままではブラウザ上に表記することができません。<br> このような特別な機能を持たされている文字は<strong>「特殊文字」</strong>と呼ばれています。 </p> <p> 特殊文字をブラウザ上にそのまま表示させるには、<strong>「文字実体参照」</strong>という表記法を使います。これを使うことによりブラウザは「機能を持たされている文字」を「単なる文字」として解釈し、「<」や「>」をそのまんま表示します。 </p> <br> <div class = "codesample"> 「「１「<」や「>」の文字実体参照」」　「<」　：　「＆lt；」　「>」　：　「＆gt；」 </div> <br> <p> ちょっとやってみますか。 </p> <div class = "codelabel"> <p> HTML </p> </div> <div class = "codesample"> 「「１<p>こんにちは</p>　を文字実体参照で表記してみる」」　＆lt：p＆gt；こんにちは＆lt；/p＆gt； </div> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag03.png"> <p> ブラウザ上にタグが表示されました。よしよし。それでは冒頭のcodeを文字実体参照で表示させていきましょう。と・・その前に。 </p> </div>  <div class = "katamari"> <h2 class = "kaisi_02"> preタグを使いましょう。 </h2> <br> <p> 冒頭の文字実体参照をそのまま使うと<p>や<h1>などのタグはブロック要素としての機能も失うため、改行もキャンセルされてしまいます。<br><br> こんな感じ▼ </p> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag04.png"> <br> <p> うまく改行表示されていません。<br> とはいうものの、いちいち<br>タグを仕込むのもかったるい。HTMLには<pre>タグという便利なものがあるので、それを使いましょう。<br><br> <pre>〜</pre>内に記述されたスペースや改行は、そのままブラウザに反映されます。 </p> <div class = "codelabel"> <p> HTML </p> </div> <div class = "codesample"> 「「１・通常の記述」」通常だとこうなる   りんご   みかん「「１・preタグを使い、<br>タグなしで記述してみる」」 <pre> preタグを使う   りんご   みかん </pre> </div> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag05.png"> <p> <pre>〜</pre>で囲んだほうは、改行やインデント（字下げ）がそのままブラウザに反映されていますね。 </p> <div class = "kajotitle">        <pre>タグ        </div> <div class = "kajonaiyou"> <p> ◼︎ 改行・字下げ（スペース）など、整形されたテキストをそのままブラウザに表示する機能を持っています。<br><br> ◼︎ 「pre」はPreformatted Text（整形済みテキスト）の略。 </p> </div> <br> <p> すこし寄り道しましたが、「文字実体参照」と<pre>タグを使って冒頭のコードを表示してみましょう。 </p>  </div>  <div class = "katamari"> <h2 class = "kaisi_02"> そして正規表現replace。 </h2> <br> <div class = "codelabel"> <p> HTML </p> </div> <div class = "codesample"> <h1>サンプル</h1> <p> webサイト上でHTMLコードを表示したい。うまくいくだろうか。 </p> <a href = "https://fuuno.net/"> トップページへのリンク </a> </div> <p> ▲冒頭のコード。これを書き換えましょう。 </p> <div class = "codelabel"> <p> html </p> </div> <div class = "codesample"> <pre> ＆lt；h1＆gt；サンプル＆lt；/h1＆gt；＆lt；p＆gt； webサイト上でHTMLコードを表示したい。うまくいくだろうか。＆lt；/p＆gt；＆lt；a href="https://fuuno.net/"＆gt；トップページへのリンク＆lt；/a＆gt； </pre> </div> <br> <p> 扨（さて）プレビュー。 </p> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag06.png"> <p> 整形されたテキスト、それにタグ「＜＞」がちゃんと表示されました。。<br> これでもう大丈夫ですね？<br><br> ページ上にHTMLコードを貼り付けたいときには、<pre>タグで囲み、「＜＞」に関しては「＆lt；」と「＆gt；」でそのつど表記すればいいので<br><br><br> 「＆lt；」と「＆gt；」でそのつど表記すれば。。<br><br><br><br> その都度 <br><br><br><br> 「＆lt；」と「＆gt；」。。 </p><br><br><br><br> <img src = "tag08.png"> <br><br><br><br> <p> 。。。。。。。。。。。。。 </p> <h3 class = "komidasi"> 正規表現、使いましょうや。 </h3> <br> <p> タグを表示するたびにその都度「＆lt；」「＆gt：」を前後に入力。なんともめんどくさい！ここは正規表現で一括replaceさせましょう。<br><br> <pre>〜</pre>の中身を<div>〜</div>で囲み、その範囲に対してJavaScriptを仕込みます。 </p> <div class = "codelabel"> <p> HTML </p> </div> <div class = "codesample"> <pre> 「「３//<pre></pre>の中身を<div></div>で囲む」」「「１<div id = "sample">」」 <h1>サンプル</h1> <p> webサイト上でHTMLコードを表示したい。うまくいくだろうか。 </p> <a href = "https://fuuno.net/"> トップページへのリンク </a> 「「１</div>」」 </pre> </div> <div class = "codelabel"> <p> JavaScript </p> </div> <div class = "codesample"> 「「３//<div></div>内のHTMLを取り出し」」 var str = document.getElementById("sample").innerHTML; 「「３//タグを文字実体参照に置き換え」」 str = str.replace(/</g,'＆lt；'); str = str.replace(/>/g,'＆gt；'); 「「３//<div></div>内のHTMLを呼び出して置き換える」」 document.getElementById("sample").innerHTML = str; </div> <br><b></b> <div class = "codelabel"> <p> ブラウザ </p> </div> <img src = "tag06.png"> <p><br> これでOK。<br><br> いちいち＆lt；、＆gt；を入力しなくても「< >」が自動的に文字実体参照に変換されてブラウザに表示されます。<br> ひとまずはお疲れ様でした。 </p><br><br>  </div>  <script> //classnameで要素たちをhtmlcollectionとして取得。変数名はclstrs。 var clstrs = document.getElementsByClassName("codesample"); //順に取り出しreplace。 for(i=0;i<=clstrs.length;i++) { //innerHTMLを取り出す var clstr = clstrs[i].innerHTML; //試しにlog。 console.log(clstr); //---------------ここからreplace作業。----------------------- //タグを特殊文字化。 clstr = clstr.replace(/</g,"<"); clstr = clstr.replace(/>/g,">"); //ダブルクオテーション。 //clstr = clstr.replace(/"/g,"&quot"); //自動改行。 clstr = clstr.replace(/\r?\n/g,'<br>'); //{}の字下げ。 clstr = clstr.replace(/\{/g,"{<div style = 'padding-left:4em;margin-top:-1.7em; margin-bottom:-1.7em;'>"); clstr = clstr.replace(/\}/g,"}</div>"); //「「1 で▶︎をdardcyanに。// clstr = clstr.replace(/「「１/g,"<span style = 'color:dodgerblue;'>"); clstr = clstr.replace(/」」/g,"</span>"); //「「２　で行を強調。 clstr = clstr.replace(/「「２/g,"<span style = 'color:mediumblue;'>"); clstr = clstr.replace(/」」/g,"</span>");//これ共通でいいのでは？ console.log(clstr); //「「３　でコメアウト。 clstr = clstr.replace(/「「３/g,"<span style = 'color:gray;'>"); //最初のbrを削除。 clstr = clstr.replace(/<br>/,""); //反映させる。--------------------------------------------- var realstr = clstrs[i]; realstr.innerHTML = clstr; } </script>  <div id = "profile"> <hr><hr> <img src = "../../main_img/fu_icon.png " style = "width:31%;float:left"> </div> <div class = "komidasi" style = "background-color:forestgreen; color:azure;"> <h3 style = "padding:0.5em;">「ふ」です。</h3> </div> <p>swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。<br><br> <a href = "https://twitter.com/fukarakaru" style = "text-decoration:none; font-size:1.7em;">🐧 twitter 🐧</a> </p><hr>  </body> </html>

CINXE.COM

HTML:ソースコードをページ上に貼り付ける。