Syntax Highlighter dengan Banyak Pilihan Warna

Publish Date : 23-08-2018 , dibaca 7288 kali, Hari ini dibaca : 1 kali ,0 comments

Cara Membuat template kode di blog atau Syntax highligter ... dengan menggunakan syntaxhighligter website atau blog kita akan lebih user friendly.. kode atau script yang dituliskan di blog akan lebih enak di lihat oleh pengunjung website.. Sehingga website yang mempunyai tema komputer,pemrograman , dan coding akan lebih baik menggunkan syntaxhighligter ini.

Pada artikel sebelumnya admin memang sudah menjelaskan cara membuat syntaxhighliger dengan CSS , Nah pada artikel kali ini kita akan Membuat Syntaxhiglighter di Website dengan Line Number atau template kode dengan nomor seperti di text editor.

Kali ini kita akan Membuat Syntax Highlighter + Line Number dengan menggunakan Prettify , Disini terdapat banyak pilihan warna template, dari hitam, putih, abu-abu, yang dapat kita pilih sesuai dengan selera kita.

Tentunya, ini menjadi keunggulan, karena code yang nanti ditampilkan diwebsite akan berbentuk seperti Text Editor Notepad , Maupun Sublime Text , atau Macromedia.

Sehingga website kita akan lebih userfriendly dan memanjakan pengunjung untuk mempelajari code yang telah kita sediakan di website.

Membuat Syntax Highligter dengan Prettify

pertama include kan css nya :

<link rel="stylesheet" type="text/css" href="lib/css/prettify_AtelierSeasideDark.css"></link>

kemudian Javascriptnya :

<script src="lib/js/jquery-1.7.2.min.js"></script>
<script src="lib/js/prettify.js"></script>
<script type="text/javascript" charset="utf-8">
    $(prettyPrint);
</script>

Nah.. dibagian HTML :

            <h2>Suckittrees.Com</h2>
                Example Syntax Highligter Bootstrap And Prettify
            <p>
                <pre class="prettyprint linenums">&lt;script&gt;<br />&nbsp;&nbsp;&nbsp; function exportHTML(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var header = "&lt;html xmlns:o='urn:schemas-microsoft-com:office:office' "+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmlns:w='urn:schemas-microsoft-com:office:word' "+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmlns='http://www.w3.org/TR/REC-html40'&gt;"+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Export HTML to Word Document with JavaScript&lt;/title&gt;&lt;/head&gt;&lt;body&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var footer = "&lt;/body&gt;&lt;/html&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fileDownload = document.createElement("a");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.body.appendChild(fileDownload);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.href = source;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.download = 'document.doc';<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.click();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.body.removeChild(fileDownload);<br />&nbsp;&nbsp;&nbsp; }<br />&lt;/script&gt;
                </pre>     
            </p>

FULL SCRIPT :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="utf-8">

<title>Syntax Highligter Bootstrap Suckittrees.com</title>
<link rel="stylesheet" type="text/css" href="lib/css/prettify_AtelierSeasideDark.css"></link>

</head>
<body>

            <h2>Suckittrees.Com</h2>
                Example Syntax Highligter Bootstrap And Prettify
            <p>
                <pre class="prettyprint linenums">&lt;script&gt;<br />&nbsp;&nbsp;&nbsp; function exportHTML(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var header = "&lt;html xmlns:o='urn:schemas-microsoft-com:office:office' "+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmlns:w='urn:schemas-microsoft-com:office:word' "+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "xmlns='http://www.w3.org/TR/REC-html40'&gt;"+<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; "&lt;head&gt;&lt;meta charset='utf-8'&gt;&lt;title&gt;Export HTML to Word Document with JavaScript&lt;/title&gt;&lt;/head&gt;&lt;body&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var footer = "&lt;/body&gt;&lt;/html&gt;";<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fileDownload = document.createElement("a");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.body.appendChild(fileDownload);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.href = source;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.download = 'document.doc';<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; fileDownload.click();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.body.removeChild(fileDownload);<br />&nbsp;&nbsp;&nbsp; }<br />&lt;/script&gt;
                </pre>     
            </p>



<script src="lib/js/jquery-1.7.2.min.js"></script>
<script src="lib/js/prettify.js"></script>
<script type="text/javascript" charset="utf-8">
    $(prettyPrint);
</script>

</body>
</html>