How to put Code in your blog/article

August 20, 2017

Introduction

For programmers, who want to write about their codes. Its often the first requirement to put your code in style. The code should looks like code, not normal text.

Solution

Use github gist

  • You need a github account. Goto https://gist.github.com/
  • Write useful description and filename with extension
    ![How to put Code in your blog/article](./xScreen,P20Shot,P202017-08-20,P20at,P204.18.23,P20PM_0.png.pagespeed.ic.F-FXRz6bJO.png)
  • Save it
  • On top left corner, there is an option to embed code
  • How to put Code in your blog/article
  • Copy the code, and put it in your article or blog's html
  • It will look something like below:How to put Code in your blog/article

Use Bootstrap framework

You must be familiar with bootstrap framework. Goto CSS code section.

The perfect way to use bootstrap functionality is to use code like below:

<pre class="pre-scrollable" style="max-height: 600px">
Your code goes here
</pre>

You can either use pre tag without any style element. The block will as long as the code in it. Or, you can put pre-scrollable class in it. The default height is 340. And, it will display a vertical scroll bar. How to put Code in your blog/article

Share this article, if you like it. And, send me your more suggestions to put in this blog.


Similar Posts

Latest Posts