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

AI Video Generation in 2025 — Models, Costs, and How to Build a Cost-Effective Pipeline

AI Video Generation in 2025 — Models, Costs, and How to Build a Cost-Effective Pipeline

AI video generation went from “cool demo” to “usable in production” in 2024-202…

AI Models in 2025 — Cost, Capabilities, and Which One to Use

AI Models in 2025 — Cost, Capabilities, and Which One to Use

Choosing the right AI model is one of the most impactful decisions you’ll make…

AI Image Generation in 2025 — Models, Costs, and How to Optimize Spend

AI Image Generation in 2025 — Models, Costs, and How to Optimize Spend

Generating one image with AI costs between $0.002 and $0.12. That might sound…

AI Coding Assistants in 2025 — Every Tool Compared, and Which One to Actually Use

AI Coding Assistants in 2025 — Every Tool Compared, and Which One to Actually Use

Two years ago, AI coding meant one thing: GitHub Copilot autocompleting your…

AI Agents Demystified — It's Just Automation With a Better Brain

AI Agents Demystified — It's Just Automation With a Better Brain

Let’s cut through the noise. If you read Twitter or LinkedIn, you’d think “AI…

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…