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

For example:

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

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


Html code:

Numbered list:

&lt;section class="section"&gt;
        &lt;div class="section__wr"&gt;
            &lt;h2 class="section__title title"&gt;Simple text&lt;/h2&gt;

            &lt;ul class="remark list"&gt;
                &lt;li class="remark__item item"&gt;
                    &lt;span class="remark__label"&gt;1&lt;/span&gt;
                    &lt;p class="remark__text text"&gt;Simple text&lt;/p&gt;
                &lt;/li&gt;
                &lt;li class="remark__item item"&gt;
                    &lt;span class="remark__label"&gt;2&lt;/span&gt;
                    &lt;p class="remark__text text"&gt;Simple text&lt;/p&gt;
                &lt;/li&gt;

            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/section&gt;


Simple list:

&lt;section class="section"&gt;
        &lt;div class="section__wr"&gt;
            &lt;h2 class="section__title title"&gt;Simple text&lt;/h2&gt;

            &lt;ul class="attention"&gt;
                &lt;li class="attention__item"&gt;
                    &lt;p class="attention__text"&gt;Simple text&lt;/p&gt;
                &lt;/li&gt;
                &lt;li class="attention__item"&gt;
                    &lt;p class="attention__text"&gt;Simple text&lt;/p&gt;
                &lt;/li&gt;

            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/section&gt;
I would rather recommend to stick to semantic HTML and &lt;ol&gt; 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