Skip to main content

Template / Style Guide

This is a post to record my templates and style guide I use for my posts, which is done in HTML. More could be added as more posts are published. Update: since 08/01/20, blogger provides a format HTML capability, so HTML formatting should be taken care of mostly. Otherwise, the rules below should apply.

  1. For justified word wraps and smaller font, wrap each post with: 
    <div style="text-align: justify; font-size: 80%">
  ...
<div>

  2. For code blocks, like the one above, use these values: 
    <div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
  <pre style="margin: 0; line-height: 125%">
<span style="color: #888888">YOUR FIRST LINE OF CODE HERE
  YOUR INDENTED CODE HERE
  MORE INDENTED CODE
  	ANOTHER INDENT LEVEL CODE
  CLOSING TAG OF FIRST INDENT CODE
FINAL CLOSING TAG</span>
</pre>
</div>
    Note there shouldn't be any spaces between the tags (new line only), and both the span tag and the pre closing tag need to be unindented to prevent a new line at the end of the code block. The template for the code block above is obtained through hilite.me — language: 'Bash' and style: 'default' with no line numbers and default padding values.

  3. Use the <br> tag for line breaks, and use the <hr> for horizontal lines ('horizontal rule').

  4. No spaces for values or words enclosed by tags unless grammatically required, like this (for the list item above): 
    <li>Use the <span style="font-family: monospace;">&lt;br&gt;</span> tag for line breaks, and use the <span style="font-family: monospace;">&lt;hr&gt;</span> for horizontal lines ('horizontal rule').</li>
    Note that the word 'Use' has no space beside the <li> tag, while a whitespace is used for 'the' on the left of the <span style="font-family...> tag because a whitespace separation is needed.

  5. Line breaks should only be added when a code block div is used. In that case, add a line break before and after the div: 
    <li>
  This is how you open your home directory in the terminal:

  <div style="background: #f8f8f8; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
    <pre style="margin: 0; line-height: 125%">
<span style="color: #888888">$ cd /home/</span>
</pre>
  </div>

  And that's how you open your home directory.
</li>

  6. For inline code, use the <span style="font-family:monospace;"> tag.

  7. Add a single line after every list item (<br>).

  8. To attach images, use the 'Compose view' to upload the image, then go back to 'HTML view' to modify. The attached image should show up like the following: 
    <div class="separator" style="clear: both; text-align: center;">
  <a
    href="https://website-link.png"
    imageanchor="1"
    style="margin-left: 1em; margin-right: 1em;"
  >
    <img
      border="0"
      style="background-color: white;"
      data-original-height="793"
      data-original-width="800"
      width="500"
      src="https://website-link.png"
  /></a>
</div>
    Add the figure and figcaption tags to add caption to the image: 
    <div class="separator" style="clear: both; text-align: center;">
  <figure>
    <a
      href="https://website-link.png"
      imageanchor="1"
      style="margin-left: 1em; margin-right: 1em;"
    >
      <img
        border="0"
        style="background-color: white;"
        data-original-height="793"
        data-original-width="800"
        width="500"
        src="https://website-link.png"
    /></a>
  </div>
  <figcaption style="font-style: italic; font-size: 80%;">
    INSERT FIGURE CAPTION HERE
  </figcaption>
<figure>

  9. To add a footnote, do the following. First, at the desired article location, append the following code: 
    <a href="#fnXX" name="fnXXtop"><sup>XX</sup></a>"
    where XX is the ith footnote number, i.e., 1, 2, 3, and so on. Note that the value to the name attribute has no # in it. Then, at the end of your article, under a horizontal line, add the note: 
    <a name="fnXX>XX</a>"
INSERT NOTE DESCRIPTION HERE
<a href="#fnXXtop"><span style="font-size: 150%">&crarr;</span></a>
    Again, note that there is no # in the value to the name attribute. The carriage return at the end helps the reader resume the article.
Labels:

Comments

Post a Comment

Popular posts from this blog

Standard Deviation vs. RMSE

I came across the concept of Root Mean Square Error (RMSE) two days ago at work, while investigating 3-D localization using Google Cartographer . I was familiar with the difference between RMSE and standard deviation previously, but at work I seemed to have gotten them mixed up (again). Like various other concepts that I frequently learned to forget, I figured I should write it down somewhere in case I need a quick refresher, hence this post. To get started, let's begin with their similarities. The standard deviation, generally represented by the Greek lowercase sigma letter $\sigma$, and the RMSE are similar mathematically: they are both metrics to measure the variance of a variable from a reference . Put simply, they tell you how much a variable you are measuring/estimating 1 vary from a reference. For example, if you get a high value in $\sigma$ or RMSE, you know that the variable that you are measuring/esti...
Post a Comment
Read more

How to set up SSH keys to access remote servers

In an earlier post , I mentioned how to switch your GitHub remote URL from HTTPS to SSH, which can improve productivity. Now before you can push and pull your repositories automatically, you'll also need to set up your SSH key. Setting SSH keys is extremely useful and can be applied to other uses outside GitHub; essentially whenever you need access to a remote server you will be required to provide a username and password, and setting an SSH key allows secure access to the desired server without having the user to provide that information every single time. SSH stands for secure shell or secure socket shell, and is used for secure access to a remote server. When you use SSH to connect to a remote server (i.e., another Linux computer), you create a shell session on that server through the terminal on your system. This text-based interface allows you to send any command remotely from your system to that server....
Post a Comment
Read more