четверг, 22 ноября 2012 г.

Syntax Highliting in Blogger for Dynamic View Template


I use alexgorbatchev syntax highliter. It is a full guide to configure it for your blog. Sorry for my bad english.

How to create post with highlited code (Install CSS first):

It's ugly, but if you use Dynamic View in Blogger, you should add this code for each post in your blog (example for C++):
<!-- (1) This code should be at the beginning of the page -->
<style type="text/css">
    .height_600px_class {height: 600px;}
    .overflow_y_hidden_class {overflow-y: hidden !important;}
</style>





<!-- (2) This code must be situated after code (1) -->
<pre class="brush:cpp; class-name:'overflow_y_hidden_class'" style="height:400px; overflow:hidden;">
#include <iostream>

using namespace std;

int main()
{
    cout<<"Hello World!"<<endl;
}
</pre>


<!-- (3) This code should be situated at the end of the page -->
<script src="http://syntaxhighliter.narod2.ru/highlightLoader.js" type="text/javascript"></script>

Blogger's strange behavior

It looks very strange, but you can add the code snippets (1) and (3) only at one page of your blog. It works for me and I do not understand how it works, but i dont need it. So, you can try, but I can't guarantee that it will works for you.

How to create your own configuration:

  1. Download this version of Syntax Highliter. Extract the arhive and find the script folder. 
  2. Open the closure compiler website. (Note, I have some troubles with compiling new version, so I reccomend you download suggested version).
  3. Add the content of compiledScript to textfield on the left. (XML and  Java are already  added) I reccomend to use this version for people, who are not well at Javascript (like me), because you can easy debug your tactic by appending and deleting shBrush*.js.
  4. Add the content of shBrush[language].js file and append it in the textfield. Append it between 2nd and 3d "paragraph". The beginning of 3d paragraph looks like: (function(){function a(){this.regexList=[{regex:new XRegExp("(\\&l ...
  5. Repeat step 4. until all desired languages are added.
  6. Click the compile button. The compiled result is displayed on the right.
  7. On top there is a text "The code may also be accessed at default.js." right click and save the file under the link default.js 
  8. Move the file to your webserver 
  9. Create a new JS File and add 
    eval(function()
{
try
 {
  doHighlight();
 }
 catch(e)
 {
  var elem = document.createElement('SCRIPT');
  elem.src="[REPLACE ME]";
  var theBody = document.getElementsByTagName('body')[0];
  theBody.appendChild(elem);
 }
  10. Replace [REPLACE ME] with the url to the compiled that you just created
  11. Save the the file that you created in step 9 and move it to your webserver.
  12. Install CSS styles (see "How to install CSS")
  13. Paste your source code inside this PRE tag (like in paragraph "How to create post")
  14. Import your own loader at the final of your post;

How To Install CSS:

    To install the CSS styles, required by SyntaxHighlighter, you will need to do this step only once: open the Blogger's Advanced Layout Designer and access the CSS editor. Copy and paste the contents of the following files:
Автор: на