0

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

1 Answer 1

0

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>.

2
  • Of you could just use Kramdown's native table syntax.
    – Waylan
    Dec 31, 2018 at 16:36
  • Using table method was straightforward.
    – Nahuatl
    Jan 1, 2019 at 23:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.