Fix overflow of indented code-blocks in lists

[Amorpheuz]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Adds styling for .highlight to <pre> inside <li>. I checked out the Rouge/redcarpet plugin file which indicates that the .highlight class should be applied to all code-blocks by default since DEV is using the default version too. I felt it would be a simpler fix via the CSS Route instead of configuring a custom renderer, which might lead to more bugs.

I did basic testing with the following article piece, to ensure that behavior for other elements didn't get switched:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget nunc sed dolor molestie eleifend. Nulla ut ante ultricies quam accumsan commodo.

```yml
- name: Get a dad-joke
  run: |
    echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"
\```

<pre>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</pre>
<code>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</code>

1. Curabitur vel tempus libero, vitae elementum purus. Cras et enim porttitor, congue odio in, eleifend mi.

    <pre>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</pre>
    <code>echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"</code>

    ```yml
    - name: Get a dad-joke
      run: |
        echo "::set-env name=TEMP::$(curl -H "Accept: text/plain" https://icanhazdadjoke.com/ | sed -r ':a;N;$!ba;s/\n/<br>/g' | tr -d '\r')"
    ```

2. Curabitur vel tempus libero, vitae elementum purus. Cras et enim porttitor, congue odio in, eleifend mi.

Related Tickets & Documents

Fixes #9988

QA Instructions, Screenshots, Recordings

If there are any instances of <pre> blocks existing inside an <li> are there, a check will be needed to verify their behavior don't get changed. Would also love some feedback on whether it is better to fix this via a custom Renderer or is the CSS fix good? I would love to resend another PR with the renderer fix, albeit after more research on the same if it is the better solution.

Bug:

Fixed:

Added tests?

• yes
• no, because they aren't needed
• no, because I need help

Added to documentation?

• docs.forem.com
• readme
• no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

[ludwiczakpawel]

one tiny ask, but other than that it seems to be working fine.