contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Syntax Highlighter dengan Banyak Pilihan Warna

Posted in Javascript Jquery Life at 23 Agustus 2018 With 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 syntaxhighligter

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>

Nah.. Untuk Themenya anda bisa memilih di website : https://jmblog.github.io/color-themes-for-google-code-prettify/

Pada website Tersebut sudah terdapat template atau theme, banyak pilihan, silahkan anda pilih , sesuai dengan keinginan anda

Demo Download

Demikianlah.. artikel cara membuat syntaxhighligter di blog atau website, semoga dapat bermanfaat ya.

Artikel Rekomendasi



Artikel Terkait

Diskusi