2009-05-19

Image

Syntax Highlighter For Blogger

Syntax Highlighter For Displaying any types of Codes and Scripts In Blogger posts.As bloggers like us sometimes need to post different languages codes in our posts basically for programmers and some need to highlight some codes too in blogger posts like me to have on tutorials and display css codes.
Syntax highlighter is the plugin actually designed for wordpress blogs but we can still use it in blogger platform but with some features.

This is how the syntax highlighter looks below you would have seen in blogger posts.




Now follow on these steps on how to install this syntax highlighter in blogger blog.

Step 1 :

Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.

Step:2

Press Ctrl+F and search for </head>

Step 3:

Add The below codes above this </head>


<link href='http://www.sigmirror.com/files/16077_mfmek/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://www.sigmirror.com/files/16075_vovs4/shCore.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16067_qdw00/shBrushJava.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16068_sxqrw/shBrushJScript.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16074_y4x0p/shBrushXml.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16065_pax2t/shBrushCss.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16081_8ztl5/shBrushProperties.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16080_4fwwe/shBrushBash.js'/>


Please download the all above js files and upload to your own server and chnage he above urls with yours as mine may not work because my server bandwidth exceeds very fast.


Now search for </body>

And place the below codes above it.


<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf=&#39;http://www.sigmirror.com/files/16078_i3xhu/clipboard.swf&#39;;
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>


Now save your template.

If you find it difficult,add this widget direct from this page.

Now whenever you are posting codes in your blog posts place the codes between these tags in your posts.


<pre name="code" class="java">
<----Your all codes Go here--->
</pre>


Change the class java to any other language if your using that in your codes like css,javascript,c-sharp or any else.And please only you add those languages that you have included in your html that you have added as i told you to add before /head tag.

If you want any other language codes to place and not having it please get it all



التعليقات:

  1. شكرا يا عمورا
    بس كان ليا استفسار هو اني عايز اعرف الكود بتاع بوكس الكتابه اللي انت كاتب الاكواد جواه

    ReplyDelete
  2. code elmodawna wla code el Syntax

    ReplyDelete
  3. الكود بتاع المربع اللي انت كاتب فيه الاكواد اللي جوا الموضوع نفسه

    code el Syntax

    المربع المنقط

    ReplyDelete
  4. blockquote {
    background: #cccccc;
    margin:1em 20px; border: 2px #808080 dashed;
    padding:5px 15px;
    color: $dateHeaderColor;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }
    .post blockquote p {
    margin:.5em 0;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
    }

    ReplyDelete
  5. شكرا يا عمورا بس انا معرفتش احطهم فين علي العموم انا نسختهم في منطقه

    /*--------------POST----------------*/
    هنا

    عايز اعرف بقي كود

    BlockQuote

    اللي انا كاتبه ده صح ولا لا؟؟؟
    /
    \
    /
    < blockquote >اكتب الاكواد هنا في الموضوع< /blockquote >

    ReplyDelete
  6. طريقة تركيب الكود كالاتى

    ابحث عن
    BlockQuote

    فى التيمبلت بتاعك

    وغيرها بالكود اللى انا كاتبه فوق

    بس كده من غير اما تكتب فى الرسالة اى اكواد تانية

    وهيظهر اى كود بشكل اوتوماتيك فى الشكل بتاعه

    ReplyDelete
  7. Nice tut, enjoyed following it and creating the same result. Thanks for sharing and looking forward for your next tut.

    los angeles web design

    ReplyDelete

Total Pageviews