Followers

Cara Membuat Syntax Highlighter Di Blog

 

Cara Membuat Syntax Highlighter Di Blog

Apa itu Syntax Highlight? Syntax Highlight adalah fitur pada teks editor yang menampilkan atau menyoroti teks-terutama source code-dalam berbagai warna dan font sesuai dengan kategori istilah.

Dengan menggunakanSyntaxHighlighter memudahkan dalam menulis source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language). Implementasi dari syntax higlighter pada halaman website, blog atau forum online sering digunakan sebagai kode prensentasi pada contoh code source ( seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan masih banyak bahasa program lainnya.) yang ingin ditampilkan.

Memang sudah banyak situs atau blog yang membahas tentang cara memasang dan menggunakan syntax highlighter serta berbagi code dan cara memasang syntax highlighter pada blog dan website ( baik yang menggunakan javascript, jQuery, maupun markup HTML) seperti Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, SHJS – Syntax Highlighting in JavaScript, Ultraviolet dan yang lainya,tapi disini saya lebih memilih HIGHLIGHT.JS ini (dari softwaremaniacs) dengan alasan lebih mudah dan dapat bekerja secara otomatis mencari blok kode, mendeteksi jenis bahasa, dan highlighting (menyorot kode). HIGHLIGHT.

JS mengenali sekurangnya 54 bahasa program dan dibundel dengan 26 theme style. Untuk itu saya hanya akan memilih menjadi 3 bahasa code saja, yang paling sering digunakan oleh para blogger (dalam membuat tutorial pada blog-nya) kebanyakan para blogger hanya untuk menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.

Syntax Highlighter ini sangat cocok bagi anda yang suka memposting artikel yang mengenai Javascript, HTML, CSS dan masih banyak lagi. Syntax Highlighter sangat cocok dikarenakan dapat menarik pengunjung dengan anda yang menggunakan berbagai macam warna.

Cara Membuat Syntax Highlighter Di Blog

1. Pergi ke bagian Dashboard blogger
2. Pilh menu Temaplte > Edit HTML.
3. lalu copy dan pastekan kode di bawah ini tepat di atas kode </head>

<script src="https://sites.google.com/site/m4w4nz/highlight.pack.js" type="text/javascript"></script> 
  <script type="text/javascript">
      hljs.initHighlightingOnLoad();
  </script>

4. Lalu copy dan pastekan kode dibawah ini tepat di atas kode ]]></b:skin> atau </style>

pre code {
  display: block; padding: 0.5em;
  color: #DCCF8F;
  background: url(https://sites.google.com/site/problogiz/home/pojoaque.jpg) repeat scroll left top #181914;
}

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

pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .javascript .title,
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}

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

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,
pre .identifier,
pre .id {
  color: #FFB03B;
}

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

pre .css .attribute {
  color: #b89859;
}

pre .css .number,pre .css .hexcolor{
  color: #DCCF8F;
}

pre .css .class {
  color: #d3a60c;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #073642;
}


5. Jika sudah selesai, klik simpan template.

Untuk Pemasangan Syntax Highlighter

1.  Untuk Pemasangan Syntax Highlighter pada Javascript


<pre data-codetype="JavaScriptku" title="JavaScript"><code class="javascript-markup">Kode Disini</code></pre>

2.  Untuk Pemasangan Syntax Highlighter pada HTML


<pre data-codetype="HTMLku" title="HTML"><code class="leangue-markup">Kode Disini</code></pre>

3.  Untuk Pemasangan Syntax Highlighter pada CSS


<pre data-codetype="CSSku" title="CSS"><code class="css-markup">Kode Disini</code></pre>

4.  Untuk Pemasangan Syntax Highlighter pada JQuery


<pre data-codetype="jQueryku" title="jQuery"><code class="javascript-markup">Kode Disini</code></pre>

Cara Menerapkan Syntax Highlighter pada Postingan 


<pre><code>

---Kode source disini---

</code></pre>


Mungkin itu saja Cara Membuat Syntax Highlighter Di Blog Semoga bermanfaat.

0 on: "Cara Membuat Syntax Highlighter Di Blog"