How can I add and replace classes in the markdown field?

Question

Prompt please both in the field {{ block.markdownContent|markdown|raw }} replace and add classes?

For example:

<p> replace by: <p class="section__paragraph text">
<h2> replace by:      <h2 class="section__title title">
<ul> replace by:      <ul class="attention">
<li> replace by:      <li class="attention__item"> and add within the tag <li class="attention__item"> тег <p class="attention__text">

Provided that the listed list of <ol> is to be replaced:
<ol> replace by:     <ul class="remark list">
<li> replace by:     <li class="remark__item item">
add:
<p class="remark__text"><span class="remark__label">1</span></p>

Html code:

Numbered list:

<section class="section">
        <div class="section__wr">
            <h2 class="section__title title">Simple text</h2>

            <ul class="remark list">
                <li class="remark__item item">
                    <span class="remark__label">1</span>
                    <p class="remark__text text">Simple text</p>
                </li>
                <li class="remark__item item">
                    <span class="remark__label">2</span>
                    <p class="remark__text text">Simple text</p>
                </li>

            </ul>
        </div>
    </section>

Simple list:

<section class="section">
        <div class="section__wr">
            <h2 class="section__title title">Simple text</h2>

            <ul class="attention">
                <li class="attention__item">
                    <p class="attention__text">Simple text</p>
                </li>
                <li class="attention__item">
                    <p class="attention__text">Simple text</p>
                </li>

            </ul>
        </div>
    </section>

Answer 1

I would rather recommend to stick to semantic HTML and <ol> elements for your ordered lists. This not only makes showing the numbers easier, it really should be done out of accessibility reasons and it’s good practice in general.

There are a couple of good solutions to modify the way numbers are displayed in ordered lists using CSS, if you are not happy with the way they are shown by default.

I can recommend using display: table-row; for it. Example code: https://stackoverflow.com/a/23947414

And here’s some example code for formatting content: counter(); in pseudo elements: https://craftcms.stackexchange.com/a/1781/125