• How To Add Syntax Highlighter In Your Blogger Blogspot


    CONTROL YOUR CODES WITH SYNTAXHIGHLIGHTER
    Do you have a trouble showing your codes in your blog or website,we can get rid of this trouble with syntax highlighter that created by alex Gorbatchev.
    There are 3 steps for adding and using his syntax highlighter, javascript,CSS,textarea.


    Get Started:
    1) Login your blogger dasboard with your gmail account.Follow these steps Design >> Edit HTML >> Expand Widget Templates ,then search for the tag ]]></b:skin> using CTRL + F and paste following Javascript code just after/blow it.


    Javacodes:
    <!-- SyntaxHighlighter begin --><script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'/> <script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/> <!-- SyntaxHighlighter end -->

    2) This time find the tag </head> with CTRL + F again, and paste the following CSS code just before/above it.

    CSS codes:


    <style type="text/css">/* syntax css begin */ .dp-highlighter {  font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;  font-size: 12px;  background-color: #E7E5DC;  width: 99%;         height: 50%;  overflow: hidden;  margin: 18px 0 18px 0 !important;  padding-top: 1px; /* adds a little border on top when controls are hidden */ } /* clear styles */ .dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span  {  margin: 0;  padding: 0;  border: none } .dp-highlighter a, .dp-highlighter a:hover {  background: none;  border: none;  padding: 0;  margin: 0; }  .dp-highlighter .bar {  padding-left: 45px; } .dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar {  padding-left: 0px; }  .dp-highlighter ol {  list-style: decimal; /* for ie */  background-color: #fff;  margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */  padding: 0px;  color: #5C5C5C; } .dp-highlighter.nogutter ol, .dp-highlighter.nogutter ol li {  list-style: none !important;  margin-left: 0px !important; } .dp-highlighter ol li, .dp-highlighter .columns div {  list-style: decimal-leading-zero; /* better look for others, override cascade from OL */  list-style-position: outside !important;  border-left: 3px solid #6CE26C;  background-color: #F8F8F8;  color: #5C5C5C;  padding: 0 3px 0 10px !important;  margin: 0 !important;  line-height: 14px; }  .dp-highlighter.nogutter ol li, .dp-highlighter.nogutter .columns div {  border: 0; } .dp-highlighter .columns {  background-color: #F8F8F8;  color: gray;  overflow: hidden;  width: 95%;         } .dp-highlighter .columns div {  padding-bottom: 5px; } .dp-highlighter ol li.alt {  background-color: #FFF;  color: inherit; } .dp-highlighter ol li span {  color: black;  background-color: inherit; } /* Adjust some properties when collapsed */  .dp-highlighter.collapsed ol {  margin: 0px; } .dp-highlighter.collapsed ol li {  display: none; } /* Additional modifications when in print-view */ .dp-highlighter.printing {  border: none; } .dp-highlighter.printing .tools {  display: none !important; } .dp-highlighter.printing li {  display: list-item !important; } /* Styles for the tools */ .dp-highlighter .tools {  padding: 3px 8px 3px 10px;  font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;  color: silver;  background-color: #f8f8f8;  padding-bottom: 10px;  border-left: 3px solid #6CE26C; } .dp-highlighter.nogutter .tools {  border-left: 0; } .dp-highlighter.collapsed .tools {  border-bottom: 0; } .dp-highlighter .tools a {  font-size: 9px;  color: #a0a0a0;  background-color: inherit;  text-decoration: none;  margin-right: 10px; }  .dp-highlighter .tools a:hover {  color: red;  background-color: inherit;  text-decoration: underline; } /* About dialog styles */ .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; } .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; } .dp-about td { padding: 10px; vertical-align: top; } .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; } .dp-about .title { color: red; background-color: inherit; font-weight: bold; } .dp-about .para { margin: 0 0 4px 0; } .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; } .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; } /* Language specific styles */ .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; } .dp-highlighter .string { color: blue; background-color: inherit; } .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; } .dp-highlighter .preprocessor { color: gray; background-color: inherit; } /* syntax css end */</style>

    3) Lastly find the tag </body> with CTRL + F, then paste below code just above/before it.

    <!-- Add-in Script for syntax highlighting --><script language='javascript'>dp.SyntaxHighlighter.BloggerMode();dp.SyntaxHighlighter.HighlightAll('code');</script><!-- end syntax -->

    4) Now save your template, You are done!

    How to Use Syntax Highlighter

    Put your HTML/Javascript code between <textarea>...</textarea> as shown blow

    <textarea class="c#" cols="70" name="code" rows="10"> ...Put Some Code Here ...</textarea>


    Done. 






    2 comments:


    1. دينا نقل عفش بالرياض
      شحن عفش من السعودية الى الاردن شحن عفش من السعودية الى الاردن
      شركة نقل عفش من المدينة المنورة الى مكة شركة نقل عفش من المدينة المنورة الى مكة
      شركة نقل عفش من الدمام الى جدة شركة نقل عفش من الدمام الى جدة
      شركة شحن عفش من جدة الى الاردن شركة شحن عفش من جدة الى الاردن
      شركة نقل عفش من الدمام الى الاحساء شركة نقل عفش من الدمام الى الاحساء

      ReplyDelete