Saturday, April 8, 2017

TC Cup of Codes: Display Line of Codes on A Blog Post

Posted on   with No comments:
I want to learn programming again.

I've been away for too long from this "world" and I miss it so much. The creative process. The late-nights. The "A-ha" moments. Even the stressed-out by.

So, one of the main purpose of this blog is to document all the lessons I've learnt. And it will look good if I can show the lines of codes properly on a post.

I've looked it up, and here's how to display your codes better on a blog post. P.S.: I'm using blogger account for this tutorial.

********

1. Log in to your blogger account.

2. Click on Theme from the side menu

3. Click Edit HTML

4. Insert the following codes in the <head> section of your HTML:


  
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<pre class="brush: html" name="code"><script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>    
<script language="javascript">
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    dp.SyntaxHighlighter.BloggerMode();
}
</script></pre>
 

  
<pre class="brush: html" name="code"><script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js" type="text/javascript"></script> 
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shLegacy.js" type="text/javascript"></script>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>     
<script language="javascript">
window.onload = function () {
    dp.SyntaxHighlighter.ClipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
    dp.SyntaxHighlighter.HighlightAll('code');
    dp.SyntaxHighlighter.BloggerMode();
}
</script></pre>
If you need to display certain other languages, you can use other brushes to display the codes better. Here are some of the list:

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/


5. Save your changes

6. Use the following into the <body> whenever you want to put your code:

  
1
2
3
4
5
<div style="text-align: justify;">
<pre class="brush: html" name="code"><pre class="brush: javascript" name="code"># Your Javascript Code</pre>
</pre>
</div>
<div style="text-align: justify;">
 

  
<div style="text-align: justify;">
<pre class="brush: html" name="code"><pre class="brush: javascript" name="code"># Your Javascript Code</pre>
</pre>
</div>
<div style="text-align: justify;">

************

Thats it!

Now you can display some codes on your blog post.

Sources:

0 comments:

Post a Comment