CARA INSTALL Syntax Highlighter di Blog KEREN !

Kali ini  bloggingpasuruan akan Share Cara Membuat kolom Syntax Highlight yang berfungsi sebagai menampilkan kode tutorial seperti yang digunakan pada website atau blog tutorial. Memang banyak situs atau blog yang membahas tentang cara menginstal dan menggunakan stabilo sintaks dan kode berbagi dan cara menginstal sintaks stabilo di blog dan website (baik menggunakan javascript, jQuery, dan HTML markup) sebagai Prisma, GeSHi, Google Code, SyntaxHighlighter , Sintaks Highlight dalam JavaScript, Ultraviolet dan lain-lain, tapi di sini saya lebih memilih HIGHLIGHT. Ini menggunakan java script dengan alasan dapat bekerja lebih mudah dan secara otomatis menemukan blok kode, mendeteksi jenis bahasa, dan menyoroti (kode sorot).

HIGHLIGHT.JS mengenali setidaknya 54 program bahasa dan dibundel dengan 26 tema gaya. Untuk itu saya hanya akan memilih menjadi kode hanya 3 bahasa, yang paling sering digunakan oleh blogger (dalam membuat tutorial di blog-nya) sebagian besar blogger hanya untuk menampilkan kode sumber, seperti kode CSS, Javascript, dan HTML mark up. sebelum kami membuat, pertama kita mengidentifikasi rasa apa itu Sorot Sintaks

DEFINISI Syntax Highlighter

Syntax Highlighter  atau Sintaks Sorot editor teks ini tampil menyorot teks-terutama kode sumber-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter kemudahan dalam menulis kode sumber atau bahasa terstruktur seperti bahasa pemrograman atau markup language (bahasa markup) akan tampak lebih profesional dan rapi.

Penggunaan sintaks higlighter pada halaman web, blog atau forum online sering digunakan sebagai kode prensentasi kode sumber sampel (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Jawa, SQL, Apache, Haskell, Erlang, Ruby, C ++, Objective C dan banyak bahasa pemrograman lain.) yang ingin ditampilkan.

CARA INSTALL Syntax Highlighter

Untuk menginstal Sntax Highlighter di blog, langkah pertama yang harus dilakukan adalah untuk menempatkan script ini tepat di atas </ head> atau bisa juga sebelum kode </ body>

<div style="text-align: justify;"><br />&lt;script src=" https://syntax-bloggingpasuruan-highlighter.googlecode.com/svn/syntaxhighligh-bloggingpasuruan.js"&gt;&lt;/script&gt;</div><br /><code><div style="text-align: justify;"><br />&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;</div><br />

Langkah selanjutnya adalah memasang CSS untuk menyesuaikan gaya dari Syntax Highlighter. Letakkan kode CSS dibawah ini juga di atas </ head>

CSS Syntax Highlighter

<div style="text-align: justify;"><br />/* CSS SYNTAX HIGHLIGHT Oleh  Bloggingpasuruan.blogspot.com <span style="text-align: left;">*/</span></div><br /><code>pre code {<br /><div style="text-align: justify;"><br />; padding: 0.5em;<br />color: #DCCF8</div><br />display: bloc<br />kF;<br /><div style="text-align: justify;"><br />ground: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}<br />pre</div><br />bac<br />k .comment,<br />pre .template_comment,<br />pre .diff .header,<br />pre .doctype,<br />pre .lisp .string,<br />pre .javadoc {<br /><div style="text-align: justify;"><br />avascript .title,</div><br />color: #586e75;<br />  font-style: italic;<br />}<br />pre .keyword,<br />pre .css .rule .keyword,<br />pre .winutils,<br />pre .<br />j<br />pre .method,<br />pre .addition,<br />pre .css .tag,<br />pre .clojure .title,<br />pre .nginx .title {<br />  color: #B64926;<br />}<br />pre .number,<br /><div style="text-align: justify;"><br />66;<br />}<br />pre .ti</div><br />pre .command,<br />pre .string,<br />pre .tag .value,<br />pre .phpdoc,<br />pre .tex .formula,<br />pre .regexp,<br />pre .hexcolor {<br />  color: #468<br />9tle,<br />pre .localvars,<br />pre .function .title,<br />pre .chunk,<br />pre .decorator,<br />pre .built_in,<br />pre .lisp .title,<br />pre .clojure .built_in,<br /><div style="text-align: justify;"><br />ant,<br />pre .class </div><br />pre .identifier,<br />pre .id {<br />  color: #FFB03B;<br />}<br />pre .attribute,<br />pre .variable,<br />pre .lisp .body,<br />pre .smalltalk .number,<br />pre .cons<br />t.title,<br />pre .parent,<br />pre .haskell .type {<br />  color: #b58900;<br />}<br />pre .css .attribute {<br />  color: #b89859;<br />}<br />pre .css .number,pre .css .hexcolor{<br /><div style="text-align: justify;"><br />f .change,<br />pre .s</div><br />color: #DCCF8F;<br />}<br />pre .css .class {<br />  color: #d3a60c;<br />}<br />pre .preprocessor,<br />pre .pi,<br />pre .shebang,<br />pre .symbol,<br />pre .symbol .string,<br />pre .di<br />fpecial,<br />pre .attr_selector,<br />pre .important,<br />pre .subst,<br />pre .cdata {<br />  color: #cb4b16;<br />}<br />pre .deletion {<br />  color: #dc322f;<br />}<br />pre .tex .formula {<br /><div style="text-align: justify;"><br /></div><br />background: #073642;<br /><div style="text-align: justify;"><br /></div><br />}

Simpan template. Untuk menggunakan Syntax Highlight pada saat menulis posting, kita hanya perlu menambahkan tag <pre> dan <code>

Seperti ini : 

<div style="text-align: justify;"><br />&lt;pre&gt;&lt;code&gt;</div><br /><code><div style="text-align: justify;"><br />Letakkan kode Javascript, jQuery atau CSS kode atau HTML kode disini</div><br /><div style="text-align: justify;"><br />nama blog sobat disini......&lt;/code&gt;&lt;/pre&gt;</div><br />

Selesai.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel CARA INSTALL Syntax Highlighter di Blog. Semoga bermanfaat dan terima kasih..

Facebook

Twitter

Pinterest

More

Less

Tumblr

Mix

E-Mail

GMail

LinkedIn

Reddit

XING

WhatsApp

Hacker News

VK

Telegram

OK

Messenger

Line

Copy Link