tutorials|August 20, 2017|1 min read

How to put Code in your blog/article

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.

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

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Claude Code Skills — Build a Better Engineering Workflow with AI-Powered Code Reviews, Security Scans, and More

Most developers use Claude Code like a search engine — ask a question, get an…

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Building an AI Voicebot for Visitor Check-In — A Practical Guide to Handling the Messy Parts

Every office lobby has the same problem: a visitor walks in, nobody’s at the…

Server Security Best Practices — Complete Hardening Guide for Production Systems

Server Security Best Practices — Complete Hardening Guide for Production Systems

Every breach post-mortem tells the same story: an unpatched service, a…

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

Staff Engineer Study Plan for MAANG Interviews — The Complete 12-Week Roadmap

If you’re a Senior Engineer (L5) preparing for Staff (L6+) roles at MAANG…

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF Explained — The Complete Guide with Real Attack Examples and Defenses

XSS and CSRF have been in the OWASP Top 10 for over a decade. They’re among the…

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

OWASP Top 10 (2021) — Every Vulnerability Explained with Code

The OWASP Top 10 is the industry standard for web application security risks. If…