Friday, September 14, 2012

Widgets

0

How to add syntax highlighter to blog or website?

  • Friday, September 14, 2012
  • Unknown

  • Styling your codes or syntax using syntax highlighter to blog and website



    Syntax highlighter is available in lots of forms but syntax highlighter used for different purpose by the writers,the main thing to highlight the codes or syntax to the increase effecieny of the weblog or to make visitors more comfortable in copying the content.

    This make the vistors to copy the syntax basically or correctly without missing the codes from the weblog or sites.

    This syntax highlighter is used mainly for two reasons as they are to provide easy and effecient way for the visitors to copy and to escape from plagiarism (copying content from other blog or websites to know more visit here )

    syntax highlighter preview


    Then just add syntax highlighter code to your blog or website.Read below tutorial to add syntax highlighter.

    I also find this in website but made few changes to work without editing or adding escape characters to your html code.

    step1:
    Login to blog.

    step 2:
    Then click  layout then click proceed.

    step 3:
    Then find <head> tag using CTRL+F in browser and search <head> tag.

    step 4:
    Copy the below code and paste it before or above the <head> tag.


    <link href="http://alexgorbatchev.com/pub/sh/current/styles
    /shCore.css" rel="stylesheet" type="text/css">
    <link href="http://alexgorbatchev.com/pub/sh/current/styles
    /shThemeDefault.css" rel="stylesheet" type="text/css">
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushCpp.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushCSharp.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushCss.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushJava.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushJScript.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushPhp.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushPython.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushRuby.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushSql.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushVb.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushXml.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/
    shBrushPerl.js" type="text/javascript"></script>
    <script language="javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf =
    'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
    SyntaxHighlighter.all();
    </script>



    step5:
    Then click save button-not preview as  preview won't work for syntax highlighter.

    step 6:
    Then you have added successfully to template now to work you must do something to work in blog.

    step 7:
    Then while posting every blog post with syntax you must want add synatx highlighter code before the start of syntax.

    step 8:
    Just copy the below code and add to every post by changing to HTML mode in blog in left corner while posting.


    <pre class="brush: html">
    your code here
    </pre>
    
    
    
    
    step 9:
    Just while posting add the below code and replace the "YOUR CODE HERE " with the code you want to add.

    step 10:
    Thats it you have successfully done now syntax will be in syntax highlighter.

    step 11:
    To copy code from this syntax highlighter jsut double click inside it and click CTRL+C and paste it were ever you want.


    For different styles of syntax highlighter just visit here and follow tutorial there as for different styles, the html code should be with escape characters.

    0 Responses to “ How to add syntax highlighter to blog or website? ”


    *Important - If you want to be informed of any replies to your comment, check the "Subscribe By Email" before submitting. Please Do Not Spam

    Post a Comment