~/tutorials/28-how-put-code-your-blogarticle.md

How to put Code in your blog/article

1 min readAugust 20, 2017by Gorav Singal#code#bootstrap-code#code-in-blog
// 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.

$ subscribe --weekly

One deep dive a week, in your inbox

System design, AI engineering, trading systems and interview prep. Tested code, real numbers. Free, and you can unsubscribe any time.

or read it on gyanbyte.substack.com

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

How to Stay Valuable as a Software Engineer in the AI Era: A Practical Playbook

How to Stay Valuable as a Software Engineer in the AI Era: A Practical Playbook

In the previous article I argued that AI is not killing software engineering…

How to Review AI-Generated Code: A Checklist for Catching What the Model Missed

How to Review AI-Generated Code: A Checklist for Catching What the Model Missed

A few months back I approved a PR that was almost entirely AI-generated. It…

How to Debug AI-Generated Code: Understand First, Fix Last

How to Debug AI-Generated Code: Understand First, Fix Last

In the last article I wrote about reviewing AI code before it goes in. This one…

The Future of Software Engineering: What AI Changes, What Stays, and Where the Jobs Go

The Future of Software Engineering: What AI Changes, What Stays, and Where the Jobs Go

Every few weeks somebody sends me a scary headline — “AI will replace all…

The Transactional Outbox Pattern: Never Lose an Event Again

The Transactional Outbox Pattern: Never Lose an Event Again

This is one of those patterns that looks like nothing until you get burnt once…

Event Sourcing, Explained: Store What Happened, Not Just the Final State

Event Sourcing, Explained: Store What Happened, Not Just the Final State

Here is a question I like to ask in interviews: your bank account shows a…