IT the Best

はてなブログのカスタマイズ情報を中心に、WEBデザインからJavaScriptまでWEB系の開発情報を発信します。便利ツールや暇つぶしのゲームなど開発物も公開します。

google code prettify

&lt;script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=js&amp;skin=sunburst"&gt;&lt;/script&gt;<br />&lt;pre&gt;&lt;code class="prettyprint linenums"&gt;<br />&lt;/code&gt;&lt;/pre&gt;

 

google code prettify用のコードです。

 

 「引用ストック」をして、記事を書くときに引用貼り付けからコピーできるように、投稿しました。

 自分用に投稿しましたが、便利なので活用してみてください。

 

 ちなみにこのようにソースコードを見やすくする機能です。

<pre><code class="prettyprint linenums">
<!--ここにソースコードを記入する
...-->
</code></pre>

 

 ------------------------------------------------------

個人用

 

https://cdn-ak.f.st-hatena.com/images/fotolife/S/Surprisedblog/20190527/20190527212335.png

 

<form action="https://codepen.io/pen/define" method="POST" target="_blank"><input name="data" type="hidden" value='{"title":"","html":"","css":"","js":"","js_external":"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"}' /> <input class="submit-codepen" disabled type="submit" value="CodePenで開く"} /></form>

 

 

 <div class="tools-htmlwithcode">
    <div class="title">
        <span class="element">title</span>
        <span class="html">HTML</span>
        <span class="css">CSS</span>
        <span class="js">JS</span>
    </div>
    <div class="body">
        <div class="element"></div>
        <div class="html"></div>
        <div class="css"></div>
        <div class="js"></div>
    </div>
</div>