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

Introduction

This blog is a result of my many instances thinking "I should write down this really cool thing I'm learning/implementing somewhere", and then proceeding to write it down with pen and paper before losing that documentation for good. After struggling time and time again trying to find notes of something I did or learned, I figured writing a blog that appends to my website / online portfolio would be a good way of storing them. As the famous quote (often mistakenly attributed to A. Einstein) goes, "if you cannot explain it simply you don't understand it well enough" 1 , this blog also serves as a great way to reinforce my understanding of the subjects I'm learning by forcing me to explain the concepts as intuitively as possible. I have enjoyed explaining concepts to people, and have considered that perhaps I'd like to teach someday, which is another benefit to setting up this blog. I should be setting up posts soon (I hope!), so stay tuned. Than
Post a Comment
Read more

How to switch a remote repo URL from HTTPS to SSH (and vice versa)

For my first post, I figured I could start with something really simple. I encountered this at work some time ago, but I forgot how to solve it after encountering it once again recently. Basically, I realized that (after not updating my website for awhile) I git cloned my repository using HTTPS instead of SSH onto my laptop. For the sake of convenience, I wanted to be able to do git pull, push and so on without having to validate my identification every time. This is awfully simple, but I figured I might as well document this in case I forget it in the future, and hopefully this helps someone in need too. I referred to the GitHub documentation for the following tutorial. When cloning repositories, you can choose whether to do it via HTTPS or SSH. A HTTPS type clone is creating a copy of a remote repo which you do not have automatic write access to , while an SSH type clone gives you the access to push your changes (as long as you have an SSH key set up) automatically . Hence,
Post a Comment
Read more