CODEWITHSUNDEEP
htmljekyll
Gautam
Gautam

Reputation: 1119

showing markdown content in a div

I'm creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.

To achieve that, my "about-me.html" has the following two divs:

<div class='about_content' id='about_left'>
    ...
</div>

and

<div class='about_content' id='about_right'>
    <span style="margin:0 10px; float:right">
        <a href="/assets/picture.jpg" title="Gautam">
            <img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
        </a>
    </span>
</div>

The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(

One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.

Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.

Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?

Upvotes: 1

Views: 1132

Answers (1)

mxpln
mxpln

Reputation: 91

You can do something like this in your HTML file where you want the content of the Markdown file to show:

{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}

Upvotes: 3

Related Questions