Assalamualaikum. Wr. Wb
Selamat pagi semuanya, pada kesempatan kali ini ane mau membagi tutorial(cara) membuat Syntax Hightlighter pada post diblog. seperti dibwah ini nih!!
Apa Itu Syntax Highlighter
SYNTAX HIGHTLIGHTER ADALAH FITUR PADA TEKS EDITOR YANG MENAMPILKAN ATAU MENYOROTI TEKS TERUTAMA SOURCE CODE DALAM BERBAGAI WARNA DAN FONT SESUAI DENGAN KATEGORI ISTILAH. GUNANYA, UNTUK 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.
Cara Membuatnya
- Masuk Blogger
- Pilih template dan Edit HTML
- Masukan kode CSS dibawah ini diatas kode ]]></b:skin>
/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev
*/
pre code {
display: block; padding: 0.5em;
background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
font-style: italic;
}
pre .nginx .built_in {
font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
- Cari Kode </head> dan pastekan kode dibawah ini tepat di atas kode tadi.
Cara Menggunakannya
CARA MENGGUAKANNYA CUKUP MUDAH TINGGAL MASUKKAN KODE DIBAWAH INI PADA EDIT HTML
<pre><code>...-kode HTML, CSS, JavaSript di Sini-..</code></pre>
SEKIAN POSINGANKALI INI DARI SAYA TERIMAKASIH ATAS KUNJUNGANNYA