Blogger$type=grid$count=4$meta=0$snip=0$rm=0$show=home$labels=no

Tutorial Membuat Syntax Highlighter Dalam Artikel

Tutorial Membuat Syntax Highlighter Dalam Artikel

Tutorial Membuat Syntax Highlighter Dalam Artikel

Apa itu Syntax Highlighter?

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks khususnya adalah Source Code dalam berbagai warna, font sesuai dengan istlah kategori.

Fitur Syntax Highlighter ini juga memudahkan para penggunanya pada saat menulis bahasa yang terstruktur seperti bahasa pemrograman atau bahasa markup.Contohnya seperti:

HTML , CSS , JAVASCRIPT , PHP , dll.

Bagaimana cara membuat Syntax Highlighter?

-Masuk ke Theme > Edit HTML > CTRL+F (Pada Windows) Command+F (Pada Mac) cari </head>

-Copy dan Paste kode dibawah ini tepat di atas </head>

<style>

/*Syntax Highlighter*/

pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}

code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}

pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}

pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}

pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}

pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}

pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}

pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}

pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}

pre .deletion{color:#dc322f}

pre .tex .formula{background:#eee8d5}

</style>


-Kemudian cari lagi dengan CTRL+F (Pada Windows) Command+F (Pada Mac) kode </body>

-Copy dan paste kode dibawah ini tepat di atas </body>

<script type="text/javascript">

//<![CDATA[

function downloadJSAtOnload(){var e=document.createElement("script");e.src="http://www.erllang.ga/js/syntax-highlighter.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;

//]]>

</script>

-Silahkan Save Theme

-Untuk menggunakan Syntax Highlighter pada artikel kalian,silahkan tambahkan kode dibawah ini di dalam Post HTML kalian tepat di kode yang mau kalian highlight

<pre><code>

Silahkan masukkan code HTML kalian disini

</pre></code>

Done,silahkan kalian liat hasilnya

COMMENTS

Name

android-app-mod,7,android-game-mod,7,blogger,37,google-adsense,6,lifestyle,4,review-game,2,ro-idle-poring,10,tech-news,26,templates-blogger,7,tips-dan-trik-game-android-ios,20,tips-dan-trik-seal-mobile,4,tips-dan-trik-seo,27,tips-dan-trik-tamer-frontier,6,tutorial-blogger,24,widget-blogger,5,
ltr
item
SevenAngel Technology: Tutorial Membuat Syntax Highlighter Dalam Artikel
Tutorial Membuat Syntax Highlighter Dalam Artikel
Tutorial Membuat Syntax Highlighter Dalam Artikel
https://3.bp.blogspot.com/-aM8LTLoBZSY/WcXQDCspntI/AAAAAAAAAsA/Q1NdOTzjh-AEiP_SLPnbwof8ux2TMTxrwCEwYBhgL/s320/Tutorial%2BMembuat%2BSyntax%2BHighlighter%2BDalam%2BArtikel.png
https://3.bp.blogspot.com/-aM8LTLoBZSY/WcXQDCspntI/AAAAAAAAAsA/Q1NdOTzjh-AEiP_SLPnbwof8ux2TMTxrwCEwYBhgL/s72-c/Tutorial%2BMembuat%2BSyntax%2BHighlighter%2BDalam%2BArtikel.png
SevenAngel Technology
http://www.sevenangel.id/2017/09/tutorial-membuat-syntax-highlighter.html
http://www.sevenangel.id/
http://www.sevenangel.id/
http://www.sevenangel.id/2017/09/tutorial-membuat-syntax-highlighter.html
true
5561685931329761976
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy