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

Messing around with procedural art - Turtle graphics

Let's take a short break from Pygrr to delve back into the world of Turtle graphics. Turtle graphics: an introduction Well, what are they? Turtle graphics are a simple vector graphic system in programming that uses a relative cursor known as a Turtle to plot data onto a Cartesian plane. Nice, that didn't clear it up at all! To put it simply, Turtle graphics are a type of programming concept where an object (consider it a "pen") is moved around a 2D canvas, drawing wherever it goes! Most people who know Python will be aware of the Turtle module - this is a Pythonic implementation of Turtle graphics (fun fact: it uses Tkinter too, like Pygrr!). Turtle graphics are a key feature of the programming language "Logo". Uses of Turtle graphics Turtle graphics are a popular way to introduce programming to kids, and are often used for this! They are also used as a quick way to implement graphic representation of data when debugging or writing code, as they are super ea
Read more

The fossils of Morocco | Mosasaurus beaugei

Finally, another post! Life has been quite difficult recently, and I've had a lot of appointments in the hospital, and, combined with a much higher workload, I haven't had too much free time. Anyways, enough of that! A couple of weeks ago, I acquired a gorgeous fish and mosasaur association, from a seller on the web. It hails from the Cretaceous of Khouribga, Morocco, unprepped, just split out of the rock! Here's the fossil in question! Ignore the mess in the background... Can you believe this thing is 70.6 - 66 million years old!? Look at the sheer awesome preservation on that fish spine; absolutely stunning! So, story time. The tooth is from the species "Mosasaurus beaugei" , a pretty large mosasaurine. Pictures from www.prehistoric-wildlife.com Here's a nice image (or, 2 images...) of the size of Mosasaurus (silhouette 16) against other mosasaurines, and a human. As yo
Read more

Blog post #0 - Hello, world!

From humble beginnings... Hi, I'm Isaac. I've been in the programming world for almost 7 years now! I started this blog to share my love of fossils and coding with you guys, the world. I'm obsessed with palaeontology, and I have a real passion for teaching others what I love, be it programming, game development, or fossil things. What am I up to? Well, you'll have to wait and see... Just kidding, I'm currently working on: A voxel (3D cube, game) engine as a basis for many other games I have planned A free Python (programming language) library for game development, called "Pygrr"... You'll see more on this very soon! Nice to meet you all, if you feel the sudden urge to send me an email, head over to my "about me" page! Isaac, over and out...
Read more