发表新帖
发表新帖

How can I use Prettify with Blogger/BlogSpot?

前端 未结
关注
11 2028
轮回少年
轮回少年 2020-12-07 09:58

I\'m using blogger.com to host some texts on programming, and I\'d like to use Prettify (same as Stack Overflow) to nicely colour the code samples.

How do I ins

相关标签:
11条回答
  • 感动是毒
    2020-12-07 10:33

    Go to blogger theme section and click on edit HTML.. Then add the Google Prettify CDN to the head tag of the HTML.

    https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js'/>

    Then include a theme for code snippet below this script..I included Desert theme.

    <!--Desert theme-->
<style type='text/css'>pre .atn,pre .kwd,pre .tag{font-weight:700}pre.prettyprint{display:block;background-color:#333}pre .nocode{background-color:none;color:#000}pre .str{color:#ffa0a0}pre .kwd{color:khaki}pre .com{color:#87ceeb}pre .typ{color:#98fb98}pre .lit{color:#cd5c5c}pre .pln,pre .pun{color:#fff}pre .tag{color:khaki}pre .atn{color:#bdb76b}pre .atv{color:#ffa0a0}pre .dec{color:#98fb98}ol.linenums{margin-top:0;margin-bottom:0;color:#AEAEAE}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}@media print{pre.prettyprint{background-color:none}code .str,pre .str{color:#060}code .kwd,pre .kwd{color:#006;font-weight:700}code .com,pre .com{color:#600;font-style:italic}code .typ,pre .typ{color:#404;font-weight:700}code .lit,pre .lit{color:#044}code .pun,pre .pun{color:#440}code .pln,pre .pln{color:#000}code .tag,pre .tag{color:#006;font-weight:700}code .atn,pre .atn{color:#404}code .atv,pre .atv{color:#060}}</style>

    For more themes, visit here.. Prettify themes

    When you create a post, change the edit mode from visual to HTML and go to the place where you are going to add the code snippet. Then include the code like this.

    <pre class="prettyprint">
  <code class="language-html">
      <!-- your code snippet -->
  </code>
</pre>

    You can change the code style by selecting relevant languages html, css, php, javascript... Here I used a html code snippet.

    0 讨论(0)
  • 别跟我提以往
    2020-12-07 10:34

    Nowadays, Google-Code-Prettify has an Auto-Loader script. You can load the JavaScript and CSS for prettify via one URL.

    Add the script to the <head> section of your Blogger template and it will work on all your posts:

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

    More detail here: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

    0 讨论(0)
  • 暖寄归人
    2020-12-07 10:37

    Have a look at SyntaxHightlighter at http://alexgorbatchev.com/wiki/SyntaxHighlighter On that site you can also find instructions on how to use it at blogger.com and the site offers a hosted version of the required scripts so you don't need to host files somewhere yourself.

    0 讨论(0)
  • 暗喜
    2020-12-07 10:40

    Another solution is to use the syntaxhighlighter 2.0 java script library. I've used it on my blog and it seems to work quite well.

    Here's a post about it:

    http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.htmllink text

    Cheers.

    0 讨论(0)
  • 星月不相逢
    2020-12-07 10:42

    It's very simple to add google code prettifier in your blogger.

    just include the below javascript library in your blogger just before tag.

    <script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

    just like in the below picture...

    enter image description here

    Now you successfully added google code prettifier in your blogger.

    Now if you want to insert code in your blogger post then add code (html, css, php and etc.), then insert that code between .... tags.

     <pre class="prettyprint">...</pre>

    or

    <code class="prettyprint">...</code>

    Demo of the google Prettify on Blogger

    Also please refer this documentation for adding this Google prettifier to blogger in the following link.

    how to add Syntax Highlighter For Blogger Using Google Prettify

    0 讨论(0)
 看不清?
提交回复
热议问题