ソースコードハイライト【Google Code Prettify】にCSSだけで言語情報を記述する - 開発日記

Photo by Sean Lim on Unsplash

Google Code Prettify

使用している code-prettify

https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst

HTML、CSS、JavaScriptなどのソースコードハイライトに、それぞれの言語情報を記述するCSS。

HTML

pre.html::before{
    content: "</>html";
    color: #ffba3d;
    border: 1px solid #ffba3d;
    padding: 0 3% 0 2%;
    float:right;
    font-weight: bolder;
}

CSS

pre.css::before{
    content: "#css";
    color: #89bdff;
    border: 1px solid #89bdff;
    padding: 0 3% 0 2%;
    float:right;
    font-weight: bolder;
}

JavaScript

pre.js::before{
    content: "JavaScript";
    color: #ffff64;
    border: 1px solid #ffff64;
    padding: 0 3% 0 2%;
    float:right;
    font-weight: bolder;
}

sample 

html

<h3>Google Code Prettify</h3>
<p>使用している code-prettify</p>
<p><a href="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst">https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js</a></p>
<p>HTML、CSS、JavaScriptなどのソースコードハイライトに、それぞれの言語情報を記述するCSS。</p> !--ここにソースコードを記入する ...--> 

JavaScript

function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max + 1 - min) + min);
}