<p>I would rather recommend to stick to semantic HTML and <code>&lt;ol&gt;</code> 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.</p>

<p>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.</p>

<p>I can recommend using <code>display: table-row;</code> for it. Example code: <a href="https://stackoverflow.com/a/23947414">https://stackoverflow.com/a/23947414</a></p>

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

CC BY-SA 3.0
2018-04-20T08:35:51.297Z
2018-04-20T08:35:51.297Z
carlcs
<p>Prompt please both in the field {{ block.markdownContent|markdown|raw }} replace and add classes?</p>

<p>For example:</p>

<pre><code>&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;
</code></pre>

<p>Html code:</p>

<p>Numbered list:</p>

<pre><code>&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;
</code></pre>

<p>Simple list:</p>

<pre><code>&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;
</code></pre>

<p><a href="https://i.sstatic.net/rUJhR.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/rUJhR.png" alt="enter image description here"></a></p>

<templating><replace><markdown>
How can I add and replace classes in the markdown field?
# How can I add and replace classes in the markdown field?

(Asked by: username_0 on 2018-04-19)

Prompt please both in the field {{ block.markdownContent|markdown|raw }} replace and add classes?
For example:
 replace by: 
 replace by:      
 replace by:      
 replace by:       and add within the tag  тег 

Provided that the listed list of  is to be replaced:
 replace by:     
 replace by:     
add:
1

Html code:
Numbered list:

        
            Simple text

            
                
                    1
                    Simple text
                
                
                    2
                    Simple text
                

            
        
    

Simple list:

        
            Simple text

            
                
                    Simple text
                
                
                    Simple text

**Tags:** templating, replace, markdown


---

## 1 answers

### Answer by username_1 on 2018-04-20. Score: 1

I would rather recommend to stick to semantic HTML and  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>


---

