30 Days of Web Design: 2 Ways to Add Nice Looking Code to Your Website/Blog

For those of you out there who also blog about code and want to paste some code into their websites, I've found several ways to do it.

#1: Gists

One way is to use Gists. Go to GitHubGist and paste your code in. Don't forget to give it a title, and choose the right language (text, CSS, HTML, etc.)! Then click Create Public Gist. It'll bring you to a page that shows your code, with on the left: Gist Detail, Revisions, Download Gist, Clone this gist, Embed this gist, and Link to this gist. Copy and paste the code under Embed this gist into the HTML of your website. Ta da! It should look like this:

#2: Notepad++

The other way, which is my favorite, and the easiest way, is to just copy and paste. You open up Notepad++ (download it here) put your code in it, and save it with the correct file extension so that Notepad++ knows how to highlight and "make pretty" your code. Then, select the portion that you want to paste onto your website, right-click, then choose Plugin commands>Copy Text with Syntax Highlighting. You might not have to do this, but for me, I then need to paste (Ctrl-v) into Microsoft Word, then copy (Ctrl-c) and paste (Ctrl-v) into blogger.

For example:

This is what happens if I paste directly into here without going to Word first:

<html>
<head>
  <title>Totally random</title>
</head>
<body>
  <p>Here's some pretty syntax for you!</p>
</body>
</html>

And then this is what happens when I do paste and then copy and paste from Word:

<html>

<head>

<title>Totally random</title>

</head>

<body>

<p>Here's some pretty syntax for you!</p>

</body>

</html>

There! I hope this helps you paste code into your website the way you want it to look!

I hope that made sense. Please comment if you have any questions!

30 Days of Web Design

Sunday, January 26, 2014

2 Ways to Add Nice Looking Code to Your Website/Blog

#1: Gists

#2: Notepad++

2 comments: