Nice way to post the source code in Blogger

Before I have tried to post some of my codes here, but they looked truly ugly, at least not professional. So today I looked for the method to post source code in the homepage with HTML or CSS editing. Certainly there must be, and luckily not just one method. Here I'd like to introduce 2 ways which I have tried already:

1. With "SyntaxHighlighter" Java Script application to edit the code to be posted locally, and with the online compilation, the "source code" looking text will be perfectly demonstrated. And the operations to achieve it is as follows:

1) download the plug-in files from here, 2.0.320 is so far the latest.
2) Unzip the zip file inside which are "scripts", "src", "styles" folders and upload them to the googlepage which is treated as a online hardware or some other online hardwares (e.g:mediafire), but with googlepage there is one problem, first you should have a gmail account, second there are no new sign-ups for this account, so if you don't have gmail acount or googlepage acount, try another online hardware server, please.
3) Login to BLOGGER and make the following settings as "Setting -> Template -> Edit HTML" and add the codes below:

1. 1. </div></div> <!-- end outer-wrapper -->


2. 2. <link href='http://[YOUR HOST]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>


3. 3. <script src='http://[YOUR HOST]/shCore.js' type='text/javascript'/>


4. 4.


5. 5. <script src='http://[YOUR HOST]/shBrushCpp.js' type='text/javascript'/>


6. 6. <script src='http://[YOUR HOST]/shBrushCSharp.js' type='text/javascript'/>


7. 7. <script src='http://[YOUR HOST]/shBrushCss.js' type='text/javascript'/>


8. 8. <script src='http://[YOUR HOST]/shBrushJava.js' type='text/javascript'/>


9. 9. <script src='http://[YOUR HOST]/shBrushJScript.js' type='text/javascript'/>


10. 10. <script src='http://[YOUR HOST]/shBrushSql.js' type='text/javascript'/>


11. 11. <script src='http://[YOUR HOST]/shBrushXml.js' type='text/javascript'/>


12. 12.


13. 13. <script class='javascript'>


14. 14. //<![CDATA[


15. 15. function FindTagsByName(container, name, Tag)


16. 16. {


17. 17. var elements = document.getElementsByTagName(Tag);


18. 18. for (var i = 0; i < elements.length; i++)


19. 19. {


20. 20. if (elements[i].getAttribute("name") == name)


21. 21. {


22. 22. container.push(elements[i]);


23. 23. }


24. 24. }


25. 25. }


26. 26. var elements = [];


27. 27. FindTagsByName(elements, "code", "pre");


28. 28. FindTagsByName(elements, "code", "textarea");


29. 29.


30. 30. for(var i=0; i < elements.length; i++) {


31. 31. if(elements[i].nodeName.toUpperCase() == "TEXTAREA") {


32. 32. var childNode = elements[i].childNodes[0];


33. 33. var newNode = document.createTextNode(childNode.nodeValue.replace(/<br\s*\/?>/gi,'\n'));


34. 34. elements[i].replaceChild(newNode, childNode);


35. 35.


36. 36. }


37. 37. else if(elements[i].nodeName.toUpperCase() == "PRE") {


38. 38. brs = elements[i].getElementsByTagName("br");


39. 39. for(var j = 0, brLength = brs.length; j < brLength; j++) {


40. 40. var newNode = document.createTextNode("\n");


41. 41. elements[i].replaceChild(newNode, brs[0]);


42. 42. }


43. 43. }


44. 44. }


45. 45. //clipboard does not work well, no line breaks


46. 46. // dp.SyntaxHighlighter.ClipboardSwf =


47. 47. //"http://[YOUR HOST]/clipboard.swf";


48. 48. dp.SyntaxHighlighter.HighlightAll("code");


49. 49. //]]>


50. 50. </script>


51. 51.


52. 52. </body>


53. 53. </html>
    
    

4) so this moment is the time for you to attach you code on the Blog with the help either "pre" or "textarea" tag. pay attention to the language of your posting code, C++, Java or some other kinds.
In google you can find more other ways to use SyntaxHighligher, whatever method you use, tht most important thing is our codes are able to be visualized.

2. The second method is a online server "Quick Highlighter" to edit the HTML format code directly. I prefer this way, easy and fast. You don't have to set anything in you Blogger, just choose the posting language and some visuable effect is OK. Here you can find the helpful tool.

And this is a sample code posting with the help of Quick Highlighter.

1. int main(int argc, char** argv)


2. {


3. glutInit(&argc, argv);


4. glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);


5. glutInitWindowSize (300, 300);


6. glutInitWindowPosition (400, 400);


7. glutCreateWindow ("Click Me!");


8. init ();


9. glutDisplayFunc(display);


10. glutReshapeFunc(reshape);


11. glutMouseFunc(mouse);


12. glutMainLoop();


13. return 0; /* ANSI C requires main to return int. */


14. }

Posted in: Codes