Best IT Recipes

How to use prettify with blogger / blogspot?

I use blogger.com to host some programming texts, and I would like to use prettify (the same as stackoverflow) to beautifully color code samples.

How to install prefix scripts in a blog domain?
Would it be better (if at all possible) to associate with a shared copy somewhere?
I have a web space in another domain. Will this help?

Thank you very much.

+54
javascript blogger shared-hosting prettify blogspot
Dec 05 '09 at 15:54
source share
9 answers

When you create a new blog post, you get the opportunity to use HTML in your post and edit blog posts.

so enter http://blogger.com , then log in, then by navigating> Edit Messages> Edit then paste 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 should not use prettyPrint directly as an event handler, it confuses it (see readme for more details). This is why we pass addLoadEvent function, which then rotates and calls prettyPrint .

In this case, since the blogger does not allow us to refer to the stylesheet, we simply insert the contents of prettify.css.

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

so that it looks like this:

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

or how is it

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

the code you paste should have your HTML cleared of <and> for this just paste the code here: http://www.simplebits.com/cgi-bin/simplecode.pl

you can put the top code in your HTML layout so that it is included for all pages by default, if you want.

Update Now you can link the CSS files in the 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 decided not to specifically replace the onload event for the body, instead I use the new DOMContentLoaded event, which older browsers do not support, if you need support for the old browser, you can use any other loading event to trigger prettyPrint, for example jQuery:

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

or supposedly the smallest domready ever

and done :)

Edit:

as Lim H pointed out in the comments, if you are using dynamic blogger views (ajax templates), then you need to use the method described here to bind custom javascript: prettyPrint () does not receive a call when the page loads

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>
+59
Dec 15 '09 at 19:34
source share

The following worked for me immediately.

  • Go to Blogger> Layout> Edit HTML
  • Copy the following snippet and paste it immediately after <head> into 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 are editing HTML by clicking "Edit HTML". In an empty field, try:

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

  • Please note that if you click "Preview", you will see this code only in black. Do not worry (for now).
  • Press "PUBLISH POST" and then "VIEW BLOG". Your code must be removed.
+41
Apr 23 '10 at 5:14
source share

Currently, Google-Code-Prettify has an autoloader script. You can load JavaScript and CSS for the prefix in one URL.

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

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

Learn more here: http://code.google.com/p/google-code-prettify/wiki/GettingStarted

+15
May 25 '13 at 4:38
source share

It’s very easy to add prettifier code to your blogger.

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

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

as in the picture below ...

enter image description here

You have now successfully added the Google Code Prefix to your blogger.

Now, if you want to paste the code into your blogger, add the code (html, css, php, etc.), then paste this code between .... tags.

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

or

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

Google Prettify on Blogger Demo

Also, please refer to this documentation to add this Google Prefiter to your blogger at the following link.

how to add a syntax shortcut for Blogger using Google Prettify

+6
Dec 20 '14 at 11:32
source share

Take a look at SyntaxHightlighter at http://alexgorbatchev.com/wiki/SyntaxHighlighter On this site you can also find instructions on how to use it on blogger.com, and the site offers a hosted version of the necessary scripts, so you don’t need to place the files somewhere- then by yourself.

+3
Dec 05 '09 at 23:17
source share

Another solution is to use the syntaxhighlighter 2.0 java script library. I used it on my blog, and it seems to work just fine.

Here is a post about it:

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

Greetings.

+2
Jan 01 '09 at 22:46
source share

Not a direct answer to your question, but you should consider GitHub . You can get a free account and get the "gists" syntax that you can provide and host on your web page.

The downside is that the copy is posted on the Github website, and if so, then this is also for you.

+1
Dec 05 '09 at 16:27
source share

cdnjs providing the SyntaxHighlighter library

got a blogger → template → change template add code below before the end of the body tag and save the template.
I gave an example for python.
you can link other script languages ​​with cdnjs. syntax highlighting code

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

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

enter image description here

 <!-- 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>
+1
Feb 04 '17 at 7:25
source share

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

 <script> $(window.blogger.ui()).on('viewitem', function (event, post, element) { prettyPrint(); }); </script>
0
Jan 29 '14 at 20:01
source share


More articles:


All Articles