Cara Menciptakan Syntax Highlighter Di Blog - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Cara Menciptakan Syntax Highlighter Di Blog
Cara Membuat Syntax Highlighter di Blog - Membahas wacana Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Saya akan menjelaskan wacana Syntax Highlighter.

kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman Cara Membuat Syntax Highlighter di Blog

Pengertian Syntax Highlighter


Syntax Highlighter yaitu fitur khusus sebuah proses pemindahan aba-aba bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah aba-aba bahasa pemrograman untuk di pindahkan maupun di copas ke dalam bentuk goresan pena lain supaya lebih gampang dalam membaca atau mempelajarinya.

Syntax Highlighter hampir persis dengan fitur Blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan aba-aba aslinya harus dilakukan secara manual. Kaprikornus pada dasarnya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain mempercantik tampilan barisan aba-aba di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca biar sanggup dengan gampang mengenal jenis aba-aba yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Di sini saya akan berikan tutorialnya ibarat pola pada blog saya sendiri, namun akan saya berikan kepada anda dengan beberapa pilihan warna background.

Cara Membuat Syntax Highlighter pada Blog


1. Login Blogger > Template > Klik Edit HTML

2. Simpan aba-aba di bawah ini sebelum aba-aba </head>

<script src="https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js"/> <script>hljs.initHighlightingOnLoad();</script>

3. Simpan aba-aba di bawah ini sebelum aba-aba ]]></b:skin> atau </style>

Pilih salah satu aba-aba CSS di bawah ini yang anda sukai warna backgroundnya maupun teksnya

/* 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}

Atau

/* 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}

Atau

/* 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}

Atau

/* 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}

Atau

/* TOMMOROW NIGHT BLUE STYLE www.arlinadzgn.com */ .tomorrow-comment,pre .comment,pre .title{color:#7285b7} .tomorrow-red,pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo{color:#ff9da4} .tomorrow-orange,pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant{color:#ffc58f} .tomorrow-yellow,pre .class,pre .ruby .class .title,pre .css .rules .attribute{color:#ffeead} .tomorrow-green,pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata{color:#d1f1a9} .tomorrow-aqua,pre .css .hexcolor{color:#99ffff} .tomorrow-blue,pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title{color:#bbdaff} .tomorrow-purple,pre .keyword,pre .javascript .function{color:#ebbbff} pre code{display:block;background:#002451;color:white;padding:0.5em} pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

Atau

/* SUNBURST STYLE www.arlinadzgn.com */ pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8} pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic} pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964} pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50} pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042} pre .subst{color:#DAEFA3} pre .regexp{color:#E9C062} pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF} pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline} pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC} pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3} pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869} pre .css .class{color:#9B703F} pre .rules .keyword{color:#C5AF75} pre .rules .value{color:#CF6A4C} pre .css .id{color:#8B98AB} pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D} pre .preprocessor{color:#8996A8} pre .hexcolor,pre .css .value .number{color:#DD7B3B} pre .css .function{color:#DAD085} pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic} pre .diff .change{background-color:#4A410D;color:#F8F8F8} pre .addition{background-color:#253B22;color:#F8F8F8} pre .deletion{background-color:#420E09;color:#F8F8F8} 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. Bila sudah memasang style atau tema syntax highlighter yang anda inginkan pada tempelate anda, kini save tempelate anda.

Cara Penulisan Syntax Highlighter


Gunakan markup HTML di bawah ini untuk mengaktifkan Syntax Highlighter pada ketika anda ingin menampilkan source code, ibarat aba-aba Javascript, CSS, dan markup HTML pada postingan anda.

<pre><code> Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini </code></pre>

Cara Menciptakan Syntax Highlighter Di Blog

Cara Membuat Syntax Highlighter di Blog - Membahas wacana Syntax Highlighter tentunya tidak luput dari kode-kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman. Apa itu yang dimaksud dengan Syntax Highlighter dan fungsinya? Saya akan menjelaskan wacana Syntax Highlighter.

kode rumit yang terdapat dalam sebuah Blog atau editor source code pada bahasa pemrograman Cara Membuat Syntax Highlighter di Blog

Pengertian Syntax Highlighter


Syntax Highlighter yaitu fitur khusus sebuah proses pemindahan aba-aba bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah aba-aba bahasa pemrograman untuk di pindahkan maupun di copas ke dalam bentuk goresan pena lain supaya lebih gampang dalam membaca atau mempelajarinya.

Syntax Highlighter hampir persis dengan fitur Blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan aba-aba aslinya harus dilakukan secara manual. Kaprikornus pada dasarnya Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Selain mempercantik tampilan barisan aba-aba di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca biar sanggup dengan gampang mengenal jenis aba-aba yang diberikan oleh penulis. Efek penggunaan Syntax Highlighter lainnya yaitu, pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi pengurus atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Di sini saya akan berikan tutorialnya ibarat pola pada blog saya sendiri, namun akan saya berikan kepada anda dengan beberapa pilihan warna background.

Cara Membuat Syntax Highlighter pada Blog


1. Login Blogger > Template > Klik Edit HTML

2. Simpan aba-aba di bawah ini sebelum aba-aba </head>

<script src="https://cdn.rawgit.com/Arlina-Design/frame/0c5e9584/highlightpacks.js"/> <script>hljs.initHighlightingOnLoad();</script>

3. Simpan aba-aba di bawah ini sebelum aba-aba ]]></b:skin> atau </style>

Pilih salah satu aba-aba CSS di bawah ini yang anda sukai warna backgroundnya maupun teksnya

/* 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}

Atau

/* 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}

Atau

/* 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}

Atau

/* 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}

Atau

/* TOMMOROW NIGHT BLUE STYLE www.arlinadzgn.com */ .tomorrow-comment,pre .comment,pre .title{color:#7285b7} .tomorrow-red,pre .variable,pre .attribute,pre .tag,pre .regexp,pre .ruby .constant,pre .xml .tag .title,pre .xml .pi,pre .xml .doctype,pre .html .doctype,pre .css .id,pre .css .class,pre .css .pseudo{color:#ff9da4} .tomorrow-orange,pre .number,pre .preprocessor,pre .built_in,pre .literal,pre .params,pre .constant{color:#ffc58f} .tomorrow-yellow,pre .class,pre .ruby .class .title,pre .css .rules .attribute{color:#ffeead} .tomorrow-green,pre .string,pre .value,pre .inheritance,pre .header,pre .ruby .symbol,pre .xml .cdata{color:#d1f1a9} .tomorrow-aqua,pre .css .hexcolor{color:#99ffff} .tomorrow-blue,pre .function,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword,pre .perl .sub,pre .javascript .title,pre .coffeescript .title{color:#bbdaff} .tomorrow-purple,pre .keyword,pre .javascript .function{color:#ebbbff} pre code{display:block;background:#002451;color:white;padding:0.5em} pre .coffeescript .javascript,pre .javascript .xml,pre .tex .formula,pre .xml .javascript,pre .xml .vbscript,pre .xml .css,pre .xml .cdata{opacity:0.5}

Atau

/* SUNBURST STYLE www.arlinadzgn.com */ pre code{display:block;padding:0.5em;background:#000;color:#f8f8f8} pre .comment,pre .template_comment,pre .javadoc{color:#aeaeae;font-style:italic} pre .keyword,pre .ruby .function .keyword,pre .request,pre .status,pre .nginx .title{color:#E28964} pre .function .keyword,pre .sub .keyword,pre .method,pre .list .title{color:#99CF50} pre .string,pre .tag .value,pre .cdata,pre .filter .argument,pre .attr_selector,pre .apache .cbracket,pre .date,pre .tex .command{color:#65B042} pre .subst{color:#DAEFA3} pre .regexp{color:#E9C062} pre .title,pre .sub .identifier,pre .pi,pre .tag,pre .tag .keyword,pre .decorator,pre .shebang,pre .prompt{color:#89BDFF} pre .class .title,pre .haskell .type,pre .smalltalk .class,pre .javadoctag,pre .yardoctag,pre .phpdoc{text-decoration:underline} pre .symbol,pre .ruby .symbol .string,pre .number{color:#3387CC} pre .params,pre .variable,pre .clojure .attribute{color:#3E87E3} pre .css .tag,pre .rules .property,pre .pseudo,pre .tex .special{color:#CDA869} pre .css .class{color:#9B703F} pre .rules .keyword{color:#C5AF75} pre .rules .value{color:#CF6A4C} pre .css .id{color:#8B98AB} pre .annotation,pre .apache .sqbracket,pre .nginx .built_in{color:#9B859D} pre .preprocessor{color:#8996A8} pre .hexcolor,pre .css .value .number{color:#DD7B3B} pre .css .function{color:#DAD085} pre .diff .header,pre .chunk,pre .tex .formula{background-color:#0E2231;color:#F8F8F8;font-style:italic} pre .diff .change{background-color:#4A410D;color:#F8F8F8} pre .addition{background-color:#253B22;color:#F8F8F8} pre .deletion{background-color:#420E09;color:#F8F8F8} 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. Bila sudah memasang style atau tema syntax highlighter yang anda inginkan pada tempelate anda, kini save tempelate anda.

Cara Penulisan Syntax Highlighter


Gunakan markup HTML di bawah ini untuk mengaktifkan Syntax Highlighter pada ketika anda ingin menampilkan source code, ibarat aba-aba Javascript, CSS, dan markup HTML pada postingan anda.

<pre><code> Isi Kode jQuery, Javascript atau Kode CSS atau Kode HTML di sini </code></pre>
HTML Javascript Tips Blogger
Langganan: Posting Komentar (Atom)