GTBS

Welcome to my blog, Green Text Black Screen! With this post I wanted to start off by writing about a few of the things I wanted to be able to do on this blog and how I made those features happen.

One of the first things I knew I wanted to be able to do was write posts in raw HTML, like:

<p>This is a <b>bolded</b> blog post</p>

This was a lot more for my own benefit than for the actual result, I thought this would give writing the blog a very late 90s, hacker-y feel as opposed to something modern like Markdown.

From there I wanted to go to something super new-age: embedding Latex in the blog posts, so I could write:

... blog post stuff ...
$a^2 + b^2 = c^2$
... more blog post stuff ...

I also knew code was definitely going to be part of a lot of posts, so I needed some way to create those neato dark boxes with neon monospace text you just saw.

To do this, I'm using a short, somewhat hacky Python script. The first part of the script takes each file in a posts folder and formats it into a plain old HTML file:

from os import listdir
from os.path import isfile, join

# constants
POST_DIR = '../posts/'
PUBLIC_DIR = '../public/'
TEMPLATE_DIR = '../templates/'

class Post:
    def __init__(self, title, web_title, create_date, url):
        self.title = title
        self.web_title = web_title
        self.create_date = create_date
        self.url = url

# find all of the post files
post_files = [f for f in listdir(POST_DIR) if isfile(join(POST_DIR, f))] 
posts = []

for post_file in post_files:
    with open((POST_DIR + post_file), 'r') as f:
        post_file_data = f.read()
    # do something with the post data

At this point I realized I could probably use some form of HTML/XML tags to tell the script which bits were Latex and which bits weren't, so I decided that, when writing blog posts, I would just wrap everything in <latex> tags:

... blog post stuff ...
<latex>
$a^2 + b^2 = c^2$
</latex>
... more blog post stuff ...

So I went searching around and stumbled upon Beautiful Soup . Beautiful Soup is normally designed for web scraping and isn't really meant to build up full HTML documents like I abused it here for, but aside from a few small blips, it did really well.

I also had to find a way to automatically format and publish Latex to the web. I knew this was possible from StackOverflow, and after a little struggling, found Pandoc , the Python wrapper for Pandoc Pypandoc , and MathJax , which Pandoc can export to. After starting to use Beautiful Soup, it was pretty easy to find everything in a latex tag and transform it into something MathJax would recognize:

def delatex(latex):
    return pypandoc.convert_text(latex, 'html', format='latex', extra_args=['--mathjax'])

# find all the latex tags
latexes = post_soup.find_all('latex')
for latex in latexes:
    # convert the latex to html
    latex_html = delatex(latex.string)
    latex.replace_with(Soup(latex_html, features="html.parser"))

This allows us to use Latex automatically in any post:

\[\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}\]

Making the code segments turned out to be a little bit easier than I expected. I wanted to have syntax highlighting on automatically, regardless of which language I was writing in. At first it seemed like my options weren't the best: either doing my own code styling, GitHub Gists (no dark theme), or CodePen Pens (only front-end languages). Then I ran across Google's code prettifier which suited all my needs. Plugging this in was pretty simple and consisted of wrapping all of my code blocks in <pre class="prettyprint"> tags and including the prettyprint script in the header of each page (I did have to hack around with the CSS styles to get the inlining to work the way I wanted it to).

Finally, I needed to serve up my files. Luckily GitHub does free static web hosting with GitHub Pages , which I've used for a lot of small projects. Because of the way my script was set up, I needed to serve everything using public/index.html as the root. A quick search gave me this StackOverflow post and the necessary git magic,
git subtree push --prefix dist origin gh-pages .

All that was left was to bundle everything in a simple deployment script:

# build the pages
cd src
python3 template.py
cd ..
# add all of the public folder
git add public && git commit -m "Automatic deployment commit"
git subtree push --prefix public origin gh-pages