IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

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

f:id:Surprisedblog:20190706011037j:plain

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);
}