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.
To check out the Online Generator follow this link, Online Code Syntax Generator tool
When Show Gutter and Show ToolBar is enabled
When Collapse All is enabled
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.
Link to Try out the Generator - Online Code Syntax Format Generator
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
- Loads vey quickly your styled code rather losing time generating the code via javscript for every time the user visits your site.
- It displays the formatted code even if the Javascript is disabled.
- Never shows your code in blant plain format initially when your page is loaded.
- Simple UI to config the settings
- 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.
- Insert the source code to the text area.
- Select the Language
- Select the Theme style
- Click on the Get Formatted HTML button
- Copy the HTML generated and paste it in your website.
- 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.
- Add the below <script> snippet before the </body> end tag.
<script type="text/javascript">
SyntaxHighlighter.initialize();
</script>
SyntaxHighlighter.initialize();
</script>
Advanced Options
When Show Gutter and Show ToolBar is enabled
When Collapse All is enabled
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.
Theme | CSS File |
Default | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreDefault.css |
Django | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreDjango.css |
Eclipse | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreEclipse.css |
Emacs | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreEmacs.css |
Fade To Grey | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreFadeToGrey.css |
MD Ultra | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreMDUltra.css |
Midnight | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreMidnight.css |
RDark | http://ajblk.github.io/SyntaxHighlightGenerator-v3.0/styles/shCoreRDark.css |
Link to Try out the Generator - Online Code Syntax Format Generator
HI ,
ReplyDeleteI'm unable to use it for angular expression. Could you please help me.
Currently you can use Javascript as language for script part of Angularjs and use HTML as language for html part of angular code.
ReplyDeleteAngularJS 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.
We have to persuade @alexgorbatchev, the developer of Code Syntax Highlighter to add support for AngularJS.
ReplyDeleteComment +1 at his Github page for this request to support AngularJS.
https://github.com/syntaxhighlighter/syntaxhighlighter/issues/380