On seeing my website, some of my friends who know HTML asked me how I formatted my code in this entry and that question became the inspiration of this page.

Code Formatting in HTML:

  1. Inline Code Formatting:

    I first came across the <code> element which displays all text in it in as-is condition and in Monospace font. Then I notice that it was quite easy to miss the code, and hence I thought of highlighting my code. I used inline CSS like <code style="background:#e6e6e6;"> to format my code.

    • Using the <code style="background:color;"> Element:

      I started fiddling with inline CSS to shade the backgrounds and had some unreadable (almost) experiences with colors.
      For example:

      1. gray
      2. lightgray
      3. #f2f2f2
      4. #e6e6e6

    • Using the <kbd> Element:

      The <kbd> element does not work in all browsers hence I use it less often.

      Check if it works in your browser: If this and this looks same, your browser does not support the <kbd> element. If the 2nd "this" appears to be in Mono-Space or a box, or rather a small button, your browser supports the <kbd> element.

  2. Block Code Formatting:

    I later felt the urge to post blocks of code together (like a file). First I considered the <pre><code>...</code></pre> tags as an option and then sought out better methods as my webhost automatically changed " " (Multiple Spaces; *Groan* They changed it again) to " " (Single Space) to save disk space, which caused several problems with indent-reliant languages like Python.

    • Using <pre><code>...</code></pre>:

      This element often works magic for people with not-so-stupid (Read: Better) webhosts and several plugins are there for syntax highlighting with <pre><code>...</code></pre> elements.

    • Using GitHub Gist:

      Often a much better option than <pre><code>...</code></pre>, GitHub Gist offer easy manageability and syntax highlighting in one package.

      See the example code below:(View on GitHub Gist)

      The code I used for the above was: (Generated by GitHub Gist)

      <script src="https://gist.github.com/sayak-brm/97bbb523bbb07bda53d41f1e120f557e.js"></script>
    • Getting code from GitHub Repos:

      I later found this nifty utility by the name of Gist-It. It does the same thing as GitHub Gist but it retrieves the code from GitHub Repositories.

      I forked a SAMPLE Repo for this example: Here.
      See the include below:

      The code I used for the above was:

      <script src="http://gist-it.appspot.com/https://github.com/sayak-brm/gist-it-example/blob/master/example.js"></script>
      The format is <script src="http://gist-it.appspot.com/GITHUB_URL">
      You can also add options to the code by adding a ? to the end of the /GITHUB_URL part.

      Supply a slice parameter to show only a particular portion of the file:

      slice=0:-2 Show the first line up to and including the second to last line
      slice=24:100 Show lines 24 through 100
      slice=0 Show only the first line of the file

      Use the footer parameter to control the appearance of the footer:

      Hide the footer
      footer=minimal Show the footer without "This Gist brought to you by gist-it."

      For Example:

      The code I used for the above was:

      <script src="http://gist-it.appspot.com/https://github.com/sayak-brm/gist-it-example/blob/master/example.js?footer=minimal"></script>