Add

Monday, July 13, 2015

Syntax Highlighter, Introduction

Introduction : Adding Code Highlights
If you are seeing a black background theme, please visit this.

When we often write blogs, we face one problem, the syntax highlighter.

It is very easy to highlight code in browser, just need to add the following two links.
One is a js file and the other is the css file.

https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.js

https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css

lets see an example which is a ruby code
class test
        def test
                return "test"
        end
end

code for above syntax highlighter is below
<pre class="prettyprint">class test
        def test
                return "test"
        end
end
</pre>
<script>prettyPrint()</script>


It is pretty straightforward.

2. Adding Line Numbers
class test
        def test
                return "test"
        end
end

code for above syntax highlighter is below
<pre class="prettyprint linenums">
class test
        def test
                return "test"
        end
end
</pre>
<script>prettyPrint()</script>
3. Themes

It is very easy to add themes like a desert theme or some other theme, just need to change the css we are loading. This is shown in another tutorial, as it might interact with the theme of this code.
4. Languages You may use this tool for any language and it autodetects the language for you.
For more information on this tool and updated documentation, go here
Visit Part 2

No comments:

Post a Comment

Hi, be precise in the comment. Don't move away from the problems.