How to use prettify with blogger/blogspot?

问题

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

How do I install the prettify scripts into the blog domain?
Would it be better (if indeed its possible) to link to a shared copy somewhere?
I have webspace on a different domain. Would that help?

Many thanks.

回答1:

When you make a new entry in blogger, you get the option to use HTML in your entry and to edit your blog entries.

so type http://blogger.com , then login, then Posting>Edit Posts>Edit then in there put this at the top:

<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(function() {
    prettyPrint();
});
</script>
<style type="text/css">
/* Pretty printing styles. Used with prettify.js. */

.str { color: #080; }
.kwd { color: #008; }
.com { color: #800; }
.typ { color: #606; }
.lit { color: #066; }
.pun { color: #660; }
.pln { color: #000; }
.tag { color: #008; }
.atn { color: #606; }
.atv { color: #080; }
.dec { color: #606; }
pre.prettyprint { padding: 2px; border: 1px solid #888; }

@media print {
  .str { color: #060; }
  .kwd { color: #006; font-weight: bold; }
  .com { color: #600; font-style: italic; }
  .typ { color: #404; font-weight: bold; }
  .lit { color: #044; }
  .pun { color: #440; }
  .pln { color: #000; }
  .tag { color: #006; font-weight: bold; }
  .atn { color: #404; }
  .atv { color: #060; }
}
</style>

Note that you shouldn't use prettyPrint directly as an event handler, it confuses it (see the readme for details). Which is why we're passing addLoadEvent a function that then turns around and calls prettyPrint.

In this case because blogger does not allow us to link to the stylesheet, we just embed the prettify.css contents.

then add a <code></code> tag or a <pre></pre> tag with the class name of "prettyprint", you can even specify the language like this "prettyprint lang-html"

so it can look like this

<pre class="prettyprint lang-html">
<!-- your code here-->
</pre>

or like this

<code class="prettyprint lang-html">
<!-- your code here-->
</code>

the code that you put in needs to have its HTML cleaned from < and > to do this just paste your code in here: http://www.simplebits.com/cgi-bin/simplecode.pl

you can put the top code in your HTML layout so that its included for all pages by default if you like.

update Now you can link CSS files in blogger, so adding this to the <head> should be enough

<link href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/lang-css.min.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        prettyPrint();
    });
</script>

I chose not to replace the body onload event on purpose, instead I'm using the new DOMContentLoaded event that the old browsers don't support, if you need old browser support, you can use any other load event to initiate prettyPrint, for example jQuery:

jQuery(function($){
    prettyPrint();
});

or the supposedly smallest domready ever

and your done :)

Edit:

as Lim H pointed out in the comments, in case where you use the blogger dynamic views (ajax templates) then you need to use the method described here to bind custom javascript: prettyPrint() doesn't get called on page load

Update 2017-06-04

Use the guide here https://github.com/google/code-prettify

Basically just use this :)

<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<pre class="prettyprint"><code class="language-css">...</code></pre>

回答2:

The following worked for me immediately.

Go to Blogger > Layout > Edit HTML
Copy the following snippet and paste it immediately after <head> in the "Edit template" field:

snippet:

<link href='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css' rel='stylesheet' type='text/css'/>
<script src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' type='text/javascript'></script>

After </head> replace <body> with <body onload='prettyPrint()'>
Click "SAVE TEMPLATE"
Go to Blogger > Posting > New Post
Make sure you're editing the HTML by clicking on "Edit HTML." In the empty field try:

<pre class="prettyprint">int foo=0; NSLog(@"%i", foo); </pre>

Notice if you click "Preview" now you'll see this code in black only. Don't worry (yet).
Click "PUBLISH POST" and then "VIEW BLOG". Your code should be prettified.

回答3:

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

回答4:

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...

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>

<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

回答5:

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.

回答6:

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.

回答7:

Not a direct answer to your question, but worth consider GitHub. You can get a free account and get syntax colored "gists" which you can share and host on your web page.

The downside is that the copy is hosted on Github's site and if that's down, then it's down for you too.

回答8:

cdnjs providing the library "SyntaxHighlighter"

got to blogger >> template >> edit template add below code just before ending of the body tag and save template.
I have given Example for python.
you can link the other language script files from cdnjs. syntax highlight code

<pre class="brush: py">
    print("hello world")
</pre>

for other languages go and copy script: https://cdnjs.com/libraries/SyntaxHighlighter

<!-- syntax highlighter-->
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.min.js'/>
<!-- for python -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.min.js'/>
<!-- include other languages like javascript, php -->
<script language='javascript'> 
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all(); 
</script>

回答9:

Here is the solution that works for me. Put in the <head>...</head> of dynamic blogger HTML:

<script>
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
    prettyPrint();
});
</script>

回答10:

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.

来源：https://stackoverflow.com/questions/1852537/how-to-use-prettify-with-blogger-blogspot

标签

javascript

shared-hosting

blogger

blogspot

prettify