Jekyll - Change the Markdown blockquote HTML output

user_15072974 0
Viewed 323

I'm learning Jekyll, and I have this basic file, which is prefaced by YAML frontmatter:

---
layout: 'post'
---

> Test Quote

I've successfully managed to link my CSS stylesheet to the top wrapper page.html file. But there's a problem in that when Jekyll turns this Markdown into HTML, it turns this quote into:

<blockquote>
  <p>Test Quote</p>
</blockquote>

Yet I need it to generate into:

<blockquote>
  <div class="quote-line-container">
    <div class="quote-line"></div>
    <div class="quote-mark">“</div>
    <div class="quote-line"></div>
  </div>
  <div class="quote-container">
    <p class="quote">Test Quote</p>
  </div>
</blockquote>

I've tried searching every variation of the words "Jekyll change Markdown HTML output" I can and no relevant results appear for my case.

How could I do this, and change the Jekyll output? Or is there a better way to generate something like this, using CSS or something?

jekyll markdown css html
1 Answers

This is not possible to do. Jekyll uses Kramdown as its Markdown engine and the customization of the process is pretty limited (as one would expect). You can see all the options here.

For this reason, your alternatives are:

  1. Making your own Markdown engine for Jekyll (which is clearly overkill).
  2. Making some preprocessing script to call before Jekyll only to perform that substitution. If you have a lot to translate, it is your best alternative.
  3. Writing your blockquotes directly as you want them generated. Jekyll will leave your HTML code intact during the Markdown translation, so the result will be the one you want.
user_87570330
Related