How to Create Syntax Highlight Blog

, No comments
How to Make a Syntax Highlight -  This time we I'll Share How to Create Syntax Highlight column that serves as the tutorial code as used on a website or blog tutorials.
Indeed many websites or blogs that discuss about how to install and use a syntax highlighter and code sharing and how to install syntax highlighter on blogs and websites (either using javascript, jQuery, and HTML markup) as Prisma, GeSHi, Google Code Prettify, SyntaxHighlighter, Syntax Highlighting in JavaScript, Ultraviolet and others, but here I prefer HIGHLIGHT. This JS with grounds can work more easily and automatically find blocks of code, detects the type of language, and highlighting (highlight code).
HIGHLIGHT.JS recognize at least 54 language programs and bundled with 26 style theme. For that I am just going to choose to be only 3 language code, which is most often used by bloggers (in making a tutorial on her blog) most of the bloggers only to display the source code, such as code CSS, Javascript, and HTML mark up. before we made,
we first identify the sense of what it is Syntax Highlight

DEFINITIONS SYNTAX HIGHLIGHT

Syntax Highlight the text editor was featured on the show or highlight text-especially source code-in different colors and fonts according to the category of terms. By using SyntaxHighlighter ease in writing the source code or a structured language such as a programming language (programming language) or markup language (markup language).
Implementation of syntax higlighter on web pages, blogs or online forum is often used as a code prensentasi the sample source code (such as Javascript , HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C and many other programming languages.) you want to display.

HOW TO INSTALL Syntax Highlighter

To install Sntax Highlighter on the blog, the first step to do is to put this script right above the </head> or it could be before the code </body>

<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>



<script>hljs.initHighlightingOnLoad();</script>
The next step is to install the css to adjust his style of Syntax Highlighter.

CSS SYNTAX HIGHLIGHT


/* CSS SYNTAX HIGHLIGHT By LeetBlogger.com */

pre code {


; padding: 0.5em;
color: #DCCF8

display: bloc
kF;


ground: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}
pre

bac
k .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {


avascript .title,

color: #586e75;
  font-style: italic;
}
pre .keyword,
pre .css .rule .keyword,
pre .winutils,
pre .
j
pre .method,
pre .addition,
pre .css .tag,
pre .clojure .title,
pre .nginx .title {
  color: #B64926;
}
pre .number,


66;
}
pre .ti

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #468
9tle,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .clojure .built_in,


ant,
pre .class 

pre .identifier,
pre .id {
  color: #FFB03B;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .cons
t.title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .css .attribute {
  color: #b89859;
}
pre .css .number,pre .css .hexcolor{


f .change,
pre .s

color: #DCCF8F;
}
pre .css .class {
  color: #d3a60c;
}
pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .di
fpecial,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}
pre .tex .formula {




background: #073642;




}
Save the template. To use Syntax Highlight on when writing a post, we just need to add tags <pre> and <code>
 like this

<pre><code>



Fill Code Javascript, jQuery or CSS code or HTML Code



here ......</code></pre>
Done. 
For Your Easy I Also Create toool for Pre Code Generator. Just Paste code and Click on convertor.
Syntax Highlights There are many styles that you can use to display a perfect code. And you can see it here . Or in Page Syntax For Bloggers Collection Highlights. 
In Next article we will post More Stylish Syntax Highlights. So Keep Update with via Email.
And up here first article How to Create Syntax Highlight this time and hopefully useful.



» DO NOT FORGET TO LIKE N Yeach comments ...

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )