Blockquote Syntax Highlighter - Ash Princess Kawaii
Breaking News
Loading...
07 Oktober 2014

Blockquote Syntax Highlighter

Oktober 07, 2014
Blockquote Syntax Highlighter
There are many tutorials on how to make the blockquote syntax highligther, but in my opinion this is the most simple and automatic. Because it does not need to be complicated to add another code on the blockquote old post, but all automatic blockquote style in syntax highlighter to your blog.

1. template then 'edit html'
2. put the following css code above  ]]></b:skin>

pre code {
display: block; padding: 0.5em;line-height:1em;
color: #DCCF8F;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0aM7Mlbbiln3wTCId8QKxbw7wAe_G3Of1CrlW_pKP3HTjwl5qOrEQUZB0R7JJU900Wvvff6gVHeV1hvSszCYOIofHf1SjTEnC7b32MhQ920XFStgoz1ZJocoaYb-OdWKhLuabUmaRXTmW/s1600/ashbgblockquote.png') repeat;}
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; }
color code can be changed to your preference.

2. Place the following script </head>

<script src='https://problogizjs.googlecode.com/files/highlight.pack.js'/> <script>hljs.initHighlightingOnLoad();</script> 

3. place following script above code </body>

<script type='text/javascript'>
//<![CDATA[
// Manipulasi tag pada blockquote
$('.post-body, .post-body p, div.post-body, #text-body, #main_text').each(function () {
    $('blockquote[class="tr_bq"]').replaceWith(function () {
        return $('<pre><code>' + $(this).html() + '</code></pre>');
    });
});
//]]>
</script>
4. save template.

See the results, all blockquote style syntax highlighter. Good luck .. May be useful.


0 Comments:

Posting Komentar