Formatting Source-Code for Webpages

2016-09-09 21:51 PDT

I've been considering blogging more often. My main motivation is to document topics explored while coding for later reference by myself and anyone who finds the documentation useful. I've decided to write the webpages for the blog myself rather than use an online blogging tool. Writing and managing the website myself will force me to learn more about web-development. I am not an expert at web-development. What I do know is mostly self-taught by searching forums and reading blogs. I look forward to learning more about this field.

Since I plan on writing about coding challenges and solutions, I am going to need a way to denote chunks of code and preferrably enable some syntax highlighting. I will consider this my first programming topic for discussion.

There are various options available for formatting your code snippits within a website. These methods include everything from embedded scripts to using a website to convert code into HTML that is then copied and pasted into the webpage's HTML.

I've seen a few stack-overflow discussion pointing at the Google Code Beautifier and so I'm going to initially give this a shot.

If you follow the links to the GitHub project you'll find decent documentation. The implementation is straight forward. The basic idea is that you add a script service to your HTML header and that enables a new environment that will format the source code.

Here's an example Fortran subroutine.

subroutine hello()
  print *, "Hello world!!!"
end subroutine

If you look at the source code for this page you'll see a script definition in the header and the <pre> environment used to format the source.

I'm going to need to spend more time with it to figure out the various formatting options. I hope to use the service for Fortran, Python, and R.

There are many option for formatting source. The documentation for Google Code Beautifier also uses a different type of environment for example HTML. There they are using a highlight class using HTML basic as the source code type.