Cara Membuat Prism Syntax Highlighter Di Blog

Bismillaahirrahmaanirrahiim
Assalaamu'alaikum Wr Wb!

Kini saya akan bagikan kepada anda mengenai tutorial yang berhubungan dengan Blog. Mungkin bagi anda para Blogger tentu memerlukan tutorial ini karena Prism Syntax Highlighter yang bagus ini merupakan wadah bagi anda pembagi tutorial Blog. Prism sangatlah ringan sehingga tidak memberatkan Website atau Blog anda, Syntax Highlighter yang extensible dibina dengan standard Website modern. Fitur Prism Syntax Highlighter adalah sebagai berikut;
➤ Mudah dipadamkan
Termasuk prism.css dan prism.js, gunakan tag kode HTML5 yang betul ( code.language-xxxx).
➤ Cahaya sebagai bulu
Teras ini 2Kb minified & Gzipped. Bahasa yang menambah 0.3-0.5KB setiap satu, tema adalah sekitar 1KB.
➤ Extensible
Tentukan bahasa baru atau memanjangkan yang sedia ada. Menambah ciri-ciri baru seni bina plugin Prism.
➤ Intuitive
Kelas bahasa diwarisi, jadi anda hanya boleh menentukan bahasa sekali untuk beberapa coretan kode.
➤ Gerakan cepat
Mendukung keselarian dengan Pekerja Web, jika ada.
➤ Gaya mudah
Semua gaya dilakukan melalui CSS, dengan nama-nama kelas boleh difahami, comment, string, property dan lain-lain.

Prism Syntax Highlighter telah digunakan pada ribuan Website termasuk dalam beberapa Website dan Blog yang pernah anda kunjungi. Prism melakukan yang terbaik guna menggalakkan penerapan pengarangan yang baik. Oleh karena itu, ia hanya berfungsi dengan unsur-unsur karena menandakan sehingga kode tanpa unsur semantik sah. Menurut spec HTML5 , cara yang disarankan untuk menentukan bahasa kode adalah kelas adalah yang menggunakan Prism. Untuk membuat perkara yang lebih mudah bagaimanapun Prism menganggap bahwa definisi bahasa ini diwarisi. Oleh karena itu, jika berbagai unsur-unsur mempunyai bahasa yang sama, anda boleh menambah kelas pada salah satu punca atau sumber yang sama dengan mereka. Dengan cara ini, anda juga boleh menentukan bahasa asli dokumen lebar dengan menambah kelas kepada elemen.

Prism Syntax Highlighter menjadikan blog anda profesional karena tampilan yang luar biasa dan anda dinilai sebagai seorang blogger yang elit dan profesional karena anda membagikan totorial dengan usaha. Membagikan tutorial dengan Prism Syntax Highlighter harus dengan beberapa proses dan pengunjung merasa manja dengan blog anda dan mereka akan rindu belajar tutorial pada blog anda. Saya katakan demikian karena mereka akan mudah dalam mengcopy script yang anda bagikan.
Sekian huraian dari saya. Untuk hasilnya, boleh anda lihat pada blog saya ini dalam artikel sekarang.

Jika anda berminat, mari ke tutorialnya ⇨
1. Login ke Blogger ➧ Tema ➧ Edit HTML pada dashboard Blogger anda, terus copy CSS berikut dan pastekan diatas / sebelum tag ]]></b:skin> atau </style>
CSS

/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection and CTRL+C to copy';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 9px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 1px 2px;
    margin-top: 10px;
    font-weight: normal;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='jQuery']:before {
    background-color: #e5b460;
}

2. Terus pastekan JavaScript (JS) berikut diatas/sebelum tag </body> atau </head>
JavaScript (JS)

<script src='https://cdn.rawgit.com/RahmatArif/Rahmat-Arif-JavaScript-JS/master/JavaScript(JS)-Syntax-Highlighter-Blogger-Responsive-By-Rahmat-Arif.js' type='text/javascript'/>

3. Terus pastekan dua jQuery berikut diatas/sebelum tag </body> atau </head>
jQuery 1

<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

jQuery 2

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

4. Gunakan HTML berikut untuk memformat artikel anda
HTML

<pre title="HTML" data-codetype ="HTML"><code class="language-markup"> ... Kode HTML (yang sudah di parse) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSS"><code class="language-css"> ... Kode CSS (yang sudah di parse) di sini ... </code></pre>
<pre title="JavaScript" data-codetype ="JavaScript"><code class="language-javascript"> ... Kode JavaScript (yang sudah di parse) di sini ... </code></pre>
<pre title="jQuery" data-codetype ="jQuery"><code class="language-javascript"> ... Kode jQuery (yang sudah di parse) di sini ... </code></pre>

Save Tema.

Silahkan anda buat artikel mengenai tutorial Blogger dengan memasukkan bagian ke kode masing-masing dan harus diparse terlebih dahulu.

Alhamdulillaah, tutorial sudah siap.

Note

Jika ada pertanyaan, silahkan anda bertanya kepada Admin melalui komentar!
Terima Kasih.

Silakan anda bagikan artikel ini kepada teman-teman anda di media sosial, agar mereka juga dapat mengambil manfaat dari artikel ini!

Alhamdulillaah
Insyaa Allaah, semoga artikel saya dapat membantu sahabat semua!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!

About Admin Areef Blogger

Sharing All About Technology

Pengertian nofollow Dan dofollow Juga Fungsinya Bismillaahirrahmaanirrahiim Assalaamu'alaikum Wr Wb! Pengertian link dengan atribut “nof
Cara Optimasi SEO Blogger Bismillaahirrahmaanirrahiim Assalaamu'alaikum Wr Wb! Sebuah blog tanpa optimasi boleh dikataka
Cara Setting Domain Dari Domainesia Untuk Blogger Bismillaahirrahmaanirrahiim Assalaamu'alaikum Wr Wb! Tutorial kali ini sangatlah mudah bagi an
Memasang Font Awesome Pada Blogger Bismillaahirrahmaanirrahiim Assalaamu'alaikum Wr Wb! Pada artikel kali ini saya akan bag