Adsense-HeaderAd-Script


Advertisement #Header

18 Jul 2014

Online Generator tool for Code Syntax formatting


With this tool you can quickly generate the styled html for your source code.  It generate styles for different IDE's like Eclipse, Emacs, Django, etc.  It supports 25 programming languages like Java, HTML, PHP, CSS, Scala, Groovy, etc.

In this new version of Code Syntax Highlighter (v3.0), it uses more modern and minimal styled UI's.

Advantages of Code Syntax Format Tool

  1. Loads vey quickly your styled code rather losing time generating the code via javscript for every time the user visits your site.
  2. It displays the formatted code even if the Javascript is disabled.
  3. Never shows your code in blant plain format initially when your page is loaded.
  4. Simple UI to config the settings
  5. It supports many languages and themes.

To check out the Online Generator follow this link, Online Code Syntax Generator tool

Steps to Generate the Formatted Code Syntax.

  1. Insert the source code to the text area.
  2. Select the Language
  3. Select the Theme style
  4. Click on the Get Formatted HTML  button
  5. Copy the HTML generated and paste it in your website.
  6. Add the external Theme CSS and Javascript library to your website.
<script type="text/javascript" src="http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/scripts/sh-v3.0-min.js"></script>
For the CSS file, choose from the Themes at the bottom of this blog.
  1. Add the below <script> snippet before the </body> end tag.
<script type="text/javascript">
    SyntaxHighlighter.initialize();
</script>

Advanced Options


When Show Gutter  and Show ToolBar  is enabled

img of gutter and toolbar when its enabled in code syntax generator

When Collapse All  is enabled
img of collapse all, when this config is enabled in code syntax generator
The source code is hidden and it is displayed when expand source is clicked

When Start Line number = 8,  Title Above Code = Simple Demo  and
When Line no. padding = 3, the line number is padded with zeros for 3 digits.

img of code with padding of 3 digits and title above the code



Link to Try out the Generator - Online Code Syntax Format Generator



3 comments:

  1. HI ,

    I'm unable to use it for angular expression. Could you please help me.

    ReplyDelete
  2. Currently you can use Javascript as language for script part of Angularjs and use HTML as language for html part of angular code.

    AngularJS framework is very rapidily growing and also new custom directives code syntax are created regularly and right now there is no syntax highlight library for Angularjs but will update here if support for Angularjs framework is added.

    ReplyDelete
  3. We have to persuade @alexgorbatchev, the developer of Code Syntax Highlighter to add support for AngularJS.

    Comment +1 at his Github page for this request to support AngularJS.
    https://github.com/syntaxhighlighter/syntaxhighlighter/issues/380

    ReplyDelete