Saturday, August 21, 2021

Embed code from github two ways

As a blogger and a programmer at the same time. Bringing your code to the general audience creates sense of pride. It depends on the language, presenting them as close to how it appears in an IDE would be very helpful for the readers. You can always take screens shots and post them on your blog as an image. But, most of the coder out there, that code in an image is not useful. Every coder needs a text based blocks of scripts to copied easily. 

So how would you post your script to a blog post and retail the visual text representation just like in an IDE?

Github

It is a popular platform for software developer to host codes. It simply offers the ability to share scripts for multiple developers and offer version controls to managed source code systematically. For mainstream developers, it does that efficiently. But for a blogger, it gives that flexibility, to capture those posted scripts and share it through a blog.

Embed code from github two ways

This involves editing your site in html level. You are reading this article upto this line, for sure you know what I'm talking about.

https://github.com/ - the main site and how to embed your code from this domain. It should look same in the image below. Just incase the actual implementation works on this article.

The script embedded:





https://gist.github.com/ - this approach works similar with above approach. In the main github repository, on url is good for single file repository. In gist, single gist file can hold multiple blocks of codes in different file type (i.e., .html, .js, .css and etc). Below is how you copy your gist url and write on the html level of your article.



The script embedded:

Which is better? 

Lately, using the http://gist-it.appspot.com causes some intermittent issues of showing up. Or, not really working at all. There could be some new guidelines or new link, I don't have any information as of the moment. But, if you have, feel free to share in the comment below.



No comments:

Post a Comment