Codeblocks: cleaner web design

Code! Beep boop, beep? We can use it to tell the computer what to do - what a beautiful concept!

If you'd noticed, in my recent (and first) Pygrr post, I showed some code. This was in a screenshot, and, well, it didn't seem to fit in too well. In this post, I will set out on a venture to fix this, and code a handling system for dumping code onto this website!

So, where do I begin? I could start by just changing a font, couldn't I? Monospaced fonts (that is, when every character is the same width) are used typically in coding (feel free to email me if you use some other font, you weirdo!), as they make it much more readable.

The typical one that you'll see used (there are lots and lots!), and my favourite, is the classic Courier. It looks like a typewriter, and, in the screenshots from yesterday, I did in fact use this font!

That looks better, but, there's still room for improvement. The CSS (cascading style-sheet - the 'coding' language that makes the web look pretty!) code for this is incredibly simple, as, we're only changing a font. Lets add a simple border:



Okay, that's worse! What's the word for the opposite of an improvement? Ah, according to the internet, it's "deterioration". Weird that we don't have "deprovement" or something. Anyways, I digress! Let's fix the border by making it lighter and rounded. 


Bear with me, this'll improve! Just a small fill colour, and different font colour, and we can already see how much better this looks:



Much better! Now lets add some more complex CSS to make line numbers! First, we have to treat each paragraph (line) as a cell in a table, to allow us to insert content before it. Then we add a counter element, and, a bit of :before magic, et voila!

The spacing after the numbers is a bit weird, and, if the numbers exceeds the first digit, then the code itself is shifted along a space. Add some margins and padding, and, we have this as the outcome!


Very nice! Let's add that to the website style file (that rhymes!). Here's a codeblock, in the website, for you to play around with! Note that if you highlight the code, you can't select the numbers.

# this is some code!

for i in range(10):

    print("testing!")

Thanks for reading, looking forward to seeing you soon. Hopefully, I'll put out another Pygrr post later today!

Oh also - we have at least one viewer from every continent (excluding Antarctica) on this website! Thank you so much guys, for taking the time to read all this - it can only go up from here!

Isaac, over and out...

Popular posts from this blog

Blog post #0 - Hello, world!

The principles of Pygrr

An introduction to Pygrr...