Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Syntax Highligther Terbaru di Blog

Cara Membuat Syntax Highligther Terbaru di Blog - Assalamualikum semua, berbicara tentang Syntax Highligther ini tentu kita tidak jauh dari kode yang rumit. Nah sebelum ke tutorial saya akan memberikan penjelasan tentang apa itu Syntax Highligther??

Apa Itu Syntax Highligther?

Syntax Highligther adalah pemindahan sebuah kode mulai dari teks, warna, serta ukuran yang sama persis di dalam sebuah bahasa pemrogramar yang jika di copy atau dipindah akan mudah di pelajari.

Saya disini akan membuat tutorial syntax highlither dengan versi terbaru yang sekarang ini digunakan oleh Arlinadzgn.com, Nah gimana tutorialnya simak yuk.

Cara Membuat Syntax Highligther Terbaru di Blog

1. Kalian Log in ke Blogger > Template > Edit HTML
2. Simpan Kode Ini di bawah kode
<script src="https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js"/>
<script>hljs.initHighlightingOnLoad();</script>
3. Simpan Kode berikut ini di bawah ini tepat di atas kode ]]</b:skin>

Disini saya berikan beberapa style kalian pilih yang mana terserah kalian.

Style Satu
/* POJOAQUE STYLE www.arlinadzgn.com */
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}

Style Kedua
/* SOLARIZED DARK STYLE www.arlinadzgn.com */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
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{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}


Style Ketiga
/* RAINBOW STYLE www.arlinadzgn.com */
pre::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none}
pre::selection{background:#FF5E99;color:#fff;text-shadow:none}
pre code{display:block;padding:0.5em;background:#474949;color:#D1D9E1}
pre .body,pre .collection{color:#D1D9E1}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{color:#969896;font-style:italic}
pre .keyword,pre .clojure .attribute,pre .winutils,pre .javascript .title,pre .addition,pre .css .tag{color:#cc99cc}
pre .number{color:#f99157}
pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#8abeb7}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .built_in,pre .lisp .title,pre .identifier{color:#b5bd68}
pre .class .keyword{color:#f2777a}
pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label,pre .id,pre .lisp .title,pre .clojure .title .built_in{color:#ffcc66}
pre .tag .title,pre .rules .property,pre .django .tag .keyword,pre .clojure .title .built_in{font-weight:bold}
pre .attribute,pre .clojure .title{color:#81a2be}
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:#f99157}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Style Keempat
/* MONOKAI STYLE www.arlinadzgn.com */
pre code{display:block;padding:0.5em;background:#272822}
pre .tag,pre .tag .title,pre .keyword,pre .literal,pre .change,pre .winutils,pre .flow,pre .lisp .title,pre .clojure .built_in,pre .nginx .title,pre .tex .special{color:#F92672}
pre code{color:#DDD}
pre code .constant{color:#66D9EF}
pre .class .title{color:white}
pre .attribute,pre .symbol,pre .symbol .string,pre .value,pre .regexp{color:#BF79DB}
pre .tag .value,pre .string,pre .subst,pre .title,pre .haskell .type,pre .preprocessor,pre .ruby .class .parent,pre .built_in,pre .sql .aggregate,pre .django .template_tag,pre .django .variable,pre .smalltalk .class,pre .javadoc,pre .django .filter .argument,pre .smalltalk .localvars,pre .smalltalk .array,pre .attr_selector,pre .pseudo,pre .addition,pre .stream,pre .envvar,pre .apache .tag,pre .apache .cbracket,pre .tex .command,pre .prompt{color:#A6E22E}
pre .comment,pre .java .annotation,pre .python .decorator,pre .template_comment,pre .pi,pre .doctype,pre .deletion,pre .shebang,pre .apache .sqbracket,pre .tex .formula{color:#75715E}
pre .keyword,pre .literal,pre .css .id,pre .phpdoc,pre .title,pre .haskell .type,pre .vbscript .built_in,pre .sql .aggregate,pre .rsl .built_in,pre .smalltalk .class,pre .diff .header,pre .chunk,pre .winutils,pre .bash .variable,pre .apache .tag,pre .tex .special,pre .request,pre .status{font-weight:bold}
pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

4. Setelah memasang kode nya sekarang kalian tinggal simpat templatenya. Kemudian untuk memanggilnya kalian bisa gunakan kode berikut ini.


Mas Dar
Mas Dar Hanya Blogger Amatiran, dan mulai ngeblog pada tahun 2017 dengan blog Ivhaa Netwoek setelah itu fakum dan ngeblog lagi di tahun 2020 demgan nnama sudarblogger.web.id

Posting Komentar untuk "Cara Membuat Syntax Highligther Terbaru di Blog"