tutorials1 Min Read

How to put Code in your blog/article

Gorav Singal

August 20, 2017

TL;DR

Use GitHub Gist for embeddable code snippets or Bootstrap's pre-scrollable CSS class to display styled, scrollable code blocks in your blog.

How to put Code in your blog/article

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.

Share

Related Posts

Curl - Your friend for Rest APIs/Calls - Basic Commands

Curl - Your friend for Rest APIs/Calls - Basic Commands

Curl is a wonderful tool for initiate REST APIs or calls. Or, you can literally…

Common used Elastic Search queries

Common used Elastic Search queries

Listing down the commonly used Elastic Search queries. You can get search…

Drupal&#58; How to block a user by email programatically

Drupal&#58; How to block a user by email programatically

Many times, while administering your drupal website, you must have encountered…

How to get Youtube Video Thumbnail Images

How to get Youtube Video Thumbnail Images

If your youtube video looks like:https://www.youtube.com/watch?v=g0kFl7sBdDQ…

Youtube API in NodeJs, Usage with Example

Youtube API in NodeJs, Usage with Example

This library is ES6, promise compatible. Or, in your package.json file, include…

How to use Docker for Drupal 7 Dev envirnoment

How to use Docker for Drupal 7 Dev envirnoment

I have been using drupal 7 from a long time, and setting up a dev environment…

Latest Posts

Supply Chain Security — Protecting Your Software Pipeline

Supply Chain Security — Protecting Your Software Pipeline

In 2024, a single malicious contributor nearly compromised every Linux system on…

Security Ticketing and Incident Response

Security Ticketing and Incident Response

The worst time to figure out your incident response process is during an…

Security Mindset for Engineers — Think Like an Attacker

Security Mindset for Engineers — Think Like an Attacker

Most engineers think about security the way they think about flossing — they…

Secrets Management — Vault, SSM, and Secrets Manager

Secrets Management — Vault, SSM, and Secrets Manager

I’ve watched a production database get wiped because someone committed a root…

Penetration Testing Basics for Developers

Penetration Testing Basics for Developers

Most developers think of penetration testing as something a separate security…

OWASP Top 10 for Cloud Applications

OWASP Top 10 for Cloud Applications

The OWASP Top 10 was written for traditional web applications. But in the cloud…