Enhance Your Blog with Neatly Displayed Code Snippets
Introduction
Learn how to seamlessly integrate code snippets from GitHub into your Blogspot articles. Embedding code directly from GitHub can significantly enhance the clarity and readability of your technical content. In this comprehensive guide, we'll walk you through the step-by-step process to effortlessly incorporate your GitHub code into your Blogspot article.
Step 1: Host Your Code on GitHub
Begin by learning how to create a GitHub repository to host your code. If you already have a repository, you can skip this step.
1. Sign in to your GitHub account.
2. Click on the "New" button to create a new repository.
3. Find out how to name your repository and configure it according to your preferences.
Hosting your code on GitHub provides a stable and accessible platform for integration into your Blogspot articles.
Step 2: Utilize GitHub Gists (Optional)
For embedding individual files or snippets, discover how GitHub Gists come in handy.
1. Go to https://gist.github.com/
2. Create a new Gist.
3. Add your code snippet and save it.
GitHub Gists offer a clean and organized way to share specific pieces of code within your blog posts.
Step 3: Get the Embed Code
GitHub Gists allow you to embed code directly using a `<script>` tag. Here's how you can do it:
1. Go to https://gist.github.com/
2. Open the Gist you want to embed.
3. Copy the URL from the address bar of your browser.
If you have a Gist with the URL `https://gist.github.com/username/gistID`, and you want to embed a specific file named `filename`, the embedded code would look something like this:
```html
<script src="https://gist.github.com/username/gistID.js?file=filename"></script>
```
For example, here we've created a gist file named `factorial.py` containing following code snippet:
Here's our gist url: "https://gist.github.com/abidshafee/d1ab8f8a50cdceec1062e74ebf934ad6"
In this case, our gist user name: "abidshafee"
And our gistID: "d1ab8f8a50cdceec1062e74ebf934ad6".
So our script tag for this file name factorial.py will be:
Now to embed the code snippet using the script tag you need to copy the gist url along with gistID followed by `.js` extension, which will look like as displayed in above 👆 code snippet.
Now, simply paste this `<script>` tag directly into your Blogspot article where you want your code to appear.
Step 4: Embed in Blogspot
Switch to HTML mode in your Blogspot editor. Then, paste the `<script>` tag you copied from GitHub Gists directly into your article where you want the code snippet to be displayed. Now, Save and publish the article; remember that you may not able to view the code snippet in the editing mode.
This approach allows your readers to view and interact with the code directly within your blog post.
Step 5: Test on Different Browsers
Discover how to view your blog post on different browsers to ensure that the code displays correctly. This step is crucial to guarantee a consistent experience for your readers.
Conclusion
By following this step-by-step guide, you can seamlessly integrate GitHub code into your Blogspot articles, enhancing the presentation of your code and making it more accessible to your readers. Whether you're sharing complete repositories or specific snippets, this approach ensures that your technical content is both informative and visually engaging.
🚀 If you found value in "How to Embed GitHub Code in Blogspot Articles," "How To" is a valuable resource. Dive into a diverse range of subjects, including programming tutorials and insightful how-to guides.
🔉 Ready to expand your programming knowledge? Explore a wide spectrum of topics on Shafekul Abid's Medium Blog. From learning programming languages to finding answers to common coding questions, a wealth of programming wisdom awaits your exploration.🔉