Skip to main content

How to integrate code snippets on BlogSpot posts?


Introduction:

Creating code snippets using HTML and CSS is very easy, but for hosted blogs such as Blogger, it is quite difficult to edit the source code of the pages. You can create some custom CSS code to the source code of the page, but today we are going to show the easy process, i.e. using popular source code hosting website 'GIT HUB'.

For example:

Steps:

  1. We will be using GIST of GitHub to make code snippets.
  2. Open up the https://gist.github.com.
  3. You may have to Sign In or Sign Up for a GitHub account.
  4. After sign in to your account, create a new gist by selecting the top right button on the web page.
  5. Type a name for your file and type or paste the source code in the second text area.
  6. That's it, now, create a secret gist or a public gist.
  7. Secret gist means it is not visible to users, but if you give them the link it will be visible.
  8. Copy the embed code.

  9. Paste in the post editor of your blogspot post while in the HTML view.
  10. It will be visible to you when you view you blog, not on the editor.

Conclusion:

Hope you got an idea how to do so! It is quite easy and fun, you don't have to edit the CSS content of your page as well it also shows syntax highlighting.
Labels:

Comments

Post a Comment

Popular posts from this blog

Creating a Web Browser With Integrated Chromium using C#

Final Output Introduction: In this post, we shall start a project to build a C# application integrated with Chromium in Visual Studio. I shall be using Visual Studio Express For Windows Desktop 2013. But the minimum requirements are mentioned below. We shall create a Windows Forms C# project from scratch and integrate Chromium Embedded Framework (CEF) in our application, basic navigation options and much more. Minimum Requirements and Prerequisites: Visual Studio 2012 or Higher that supports NuGet Package Manager. A decent internet connection. Basic Knowledge of C#. Knowlege in using Windows efficiently. Creating A Visual Studio Project: First, create a Visual Studio C# Project through File > New Project > Installed > Visual C# > Windows > Windows Forms . Name the file whatever you want, for example ' Web Browser '. New Project Customising the Form: Now customize the main form by changing its  Properties  like Text to 'Web...
7 comments
Read more

Complete Guide to Downloading and Installing Windows 10 Using ISO or Media Creation Tool

Source: Softonic Note: This article is for Windows users only. If you want an article on Installing Windows 10 from Linux, comment in the comment section below. Minimum Requirements: Processor : 1 gigahertz (GHz) or faster. RAM : 1 GB (32-bit) or 2 GB (64-bit) Free hard disk space : 16 GB. Graphics card : Microsoft DirectX 9 graphics device with WDDM driver. A Microsoft account and Internet access .( ISO File Size : About 3.5 GB and Upgrade File Size : No Info) Recommended Requirements: Processor : 2 GHz or faster. RAM : 4 GB or higher (32-bit or 64-bit). Free Hard Disk Space : 20 GB. Graphics Card:  Microsoft DirectX 10. Stable Internet Connection and about 1024 bits/second, and also around 5 GB of internet package from the ISP. Note: Recommended requirements are not necessary to run Windows 10. But if you have those, you can run your Windows efficiently. How to check your system requirements for Windows 10? If you do not kn...
7 comments
Read more

Creating a Login Form Using Bootstrap and HTML - Front End

Login Form UI Introduction: In this post, you will get an idea how to create a Login User Interface with the help of a popular Front End Web Framework named Bootstrap. Steps: Open up a text editor and save the file with extension '.html'. Type it out with the basic HTML code. Add Bootstrap CDN between the opening and close <head> tags. You can get the Bootstrap from the Bootstrap website here . It will be somewhat like the snippet below. Now add some custom styles just before the closing head tag. We are using -webkit-linear-gradient for chrome only, you can add -moz-linear-gradient and include the same color parameters to it. Let's come to <body> tag and edit it.  First creating a card using bootstrap class called 'card'. Go to Bootstrap's website documentation for further details. Then refer to the code as follows: We are done and the final code will be look like this: Conclusion: We have created th...
Post a Comment
Read more