Markdown?

ctuxboy

Hello,

Adding a text box 'textProfielOmschrijving' for using with Markdown.
When adding a unordered list it doesn't work. Also when adding html-tags (https://en.wikipedia.org/wiki/Markdown#Markdown_Extra), see video:
https://share.vidyard.com/watch/QSfA1sRRfPkuYRArWAS2gW?

Here the field in the template:

<div class="column is-8 is-desktop">
@{ textProfielOmschrijving | markdown }
</div>

Missed something?

mad

ctuxboy

Hi, there must be a blank line before and after the list.

Some Text

* List Item
* List Item

More text

ctuxboy

Hi @mad ,

Trying this. But doesn't work.
The only thing is that every item is a new line, but without 'bullet'
Also basic html doesn't work.

mad

ctuxboy

How does your markdown text look? Does it look ok in the preview? Please make sure that the list items are not inside other HTML tags. Normally you don't need any HTML markup in a markdown text.

ctuxboy

I try it with html, for testing, but remove the html, so following your advice in previous comment, but doesn't work. Also when looking in the preview tab, it doesn't show the list 'markup'

ctuxboy

Hi,
I try bold text '**', that works, but making 'lists' doesn't work

ctuxboy

Hi @mad find the problem why the list doesn't work after parsing markdown to html.

The Bulma framework set by default:
list-style: none;

ctuxboy

Now find a simple solution and maybe it can help others:
Adding a div with css class 'markdown-content' and adding relevant markup:

HTML:
<div class="markdown-content">
@{ textYourField | markdown }
</div>

CSS:
.markdown-content ul {
list-style: disc;
}
.markdown-content p {
padding-top: 10px;
padding-bottom: 10px;
}

mad

ctuxboy Great that it works now for you! ?

However, Bulma has a class for all those markdown elements like lists, paragraphs and headlines. Just use the content class as follows:

<div class="content">
    @{ text | markdown }
</div>

ctuxboy

mad oh okay, i didn't know that.
Thats awesome ?
Happy that it works!!

Thanks