Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-04-20T08:35:51.297Z
Answers.LastActivityDate: 2018-04-20T08:35:51.297Z
Answers.UserDisplayName: carlcs
Body: <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>
  
Tags: <templating><replace><markdown>
Title: How can I add and replace classes in the markdown field?
ThreadText: # 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:
  
  ```
  <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>
  
  ```
  
  [![enter image description here](https://i.sstatic.net/rUJhR.png)](https://i.sstatic.net/rUJhR.png)
  
  **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 `<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>
  
  
  ---
  
  