Is there a way to create a user defined function in Markdown?

Question

Created a blog using Jekyll and git hub pages. I need to indent to align a list of expenses. I found a way how, but I would like to insert that into a function.

Example:

1. Sum of Contractor expenses - $6,800
2. Heating and Air - $5,100
3. Fridge and Stove - $1,100
4. Hardware store purchases - $5,000
5. Miscellaneous - $2,000

I would like all of the amounts to line up.

According to this SO question , I can use   to create a space. However, I need to insert a lot of these to obtain what I want.

Another suggestion is Tab+Space but this doesn't seem to work in the middle of the text.

From the same post, I tried using Alt+0+1+6+0 and that seems to work.

The expected results would look like this.

1. Sum of Contractor expenses - TAB; $6,800
2. Heating and Air - TAB;(5) $5,100

Answer 1

As the answer to that SO question states:

There's no way to do that in markdown's native features. However markdown allows inline HTML...

There are a couple of ways you could do this. You could use a <table> element, where the HTML looks like this:

<table>
  <tr><td>Sum of Contractor expenses</td><td>$6,800</td></tr>
  <tr><td>Heating and Air</td><td>$5,100</td></tr>
  <tr><td>Fridge and Stove</td><td>$1,100</td></tr>
  <tr><td>Hardware store purchases</td><td>$5,000</td></tr>
  <tr><td>Miscellaneous</td><td>$2,000</td></tr>
</table>

Or, you could use class names and CSS, where the HTML looks like this:

<div>
  <span class="description">Sum of Contractor expenses</span>
  <span class="cost">$6,800</span>
</div>
<div>
  <span class="description">Heating and Air</span>
  <span class="cost">$5,100</span>
</div>
<div>
  <span class="description">Fridge and Stove</span>
  <span class="cost">$1,100</span>
</div>
<div>
  <span class="description">Hardware store purchases</span>
  <span class="cost">$5,000</span>
</div>
<div>
  <span class="description">Miscellaneous</span>
  <span class="cost">$2,000</span>
</div>

And, the CSS looks like this:

.description { width: 100px }
.cost { width: 30px; text-align: right; }

Note 1: You'll need to play with the widths to get things aligned the way you want.

Note 2: You could also apply class names and CSS to the <td> tags in the <table> .