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
code for above syntax highlighter is below
It is pretty straightforward.
2. Adding Line Numbers
code for above syntax highlighter is below
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
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.