ソースコードを記事内で枠内、フォームで表示し、必要な読者がコピーしてお使いいただく
...そんな手法ですが、HTML、プログラム関連サイトなど拝見するといくつかの固定されて
いない表現方法を確認することができますね..

通常はサイト掲載など不要のソースコードですが、コンテンツ事情により掲載しなければ
ならないこともああるでしょうから...該当する例はご参照ください...

さて、Javascriptライブラリを利用すれば、いくつか確認できますけどあまり面倒なのは
後々考えて今回はパス...いいものありましたら追加しますけど...?

ソースコードをデフォルトでそのまま表示...形を作るならシリウス機能ボックス枠で囲めば
よいだけですね...

以下はデフォルト状態...シリウスフォントスタイルで表示されますね..

*{
margin: 0;
padding: 0;
}

しかし、フォントスタイルをそれらしくとなると pre codeで囲む...スタイルが変化してます
でしょう...

*{
margin: 0;
padding: 0;
}
 

ソース...
<pre><code>
*{
margin: 0;
padding: 0;
}

</code></pre>

もっとそれらしくとするなら...けたりすることで、JavaScriptライブラリを使えばですが、
今回は、Googleが開発しているcode-prettifyライブラリを使っての実装となります..

code-prettifyは、ダウンロード版も置かれていますが、script を読み込むという簡単
使用で進めますね..

HTMLコードを表示する例...フォントカラーは自動配色..CSS指定です...

<script src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer=""></script>

CSSを表示する例

border: 0;
font-size: 100%;
outline: 0;
vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {

導入手順

/* ライブラリ読み込み記載をhead内に配置*/
<script src="https://rawgit.com/google/code-prettify/master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer=""></script>

/* スタイルシートに以下記載配置,,,フォントカラー　ボーダーラインはカラーコード指定で
反映されます...*/

.operative { font-weight: bold; border: 1px solid yellow; }
#quine { border: 1px solid #88c; }

/* シリウス記事内では以下classコード内にソースを配置します..*/
<pre class="prettyprint" id="quine">
border: 0;
font-size: 100%;
outline: 0;
vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
</pre>

枠や背景カラーの変更

枠や背景は、上記CSSを書き換える、項目追加で変更することができます..

.operative { font-weight: bold; border: 1px solid yellow; }
#quine { border: 1px solid #88c; } (枠カラーの指定）

背景カラーを指定したいときはこの行を追加します一列下に追加します..
#quine { background-color: #237db9; }　
カラーコードは自己改行してしてください...

ご注意

HTMLは、変換しないと表示されませんので、エンコードをご利用して返還コードを
張り付ける...です..
https://encodemaniax.com/

HTML簡単仕様...おまけ？

一度にすべてを表示させることもできるのですが、少し隠して表示する..
バーをマウス移動でも確認できる...隠れコードはマウスコピーすると自動で現れます..

バー付きの枠に入れてるだけですね

参照コード外枠はバー付き...
<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:100%;background-color:#000000;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 1px solid #696969;color:#ffffff;text-align:left;height:300px;">

中身
&lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;!--backtotop--&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(function() {
var topBtn = $(&#039;.backtotop&#039;);
topBtn.hide();
$(window).scroll(function () {
if ($(this).scrollTop() &gt; 300) {
topBtn.fadeIn();
} else {
topBtn.fadeOut();
}
});
});
&lt;/script&gt;
中身ここまで...

</div></div></div>

以降、数値段なども追記いたしますのでお待ちください

ソースコードコピーフォーム
トップページ

一覧