Fenced code block within div

Question

I'm trying to create a Jekyll project on Github, styled with Material Design Components. MDC states that Elements are not natively styled, which means that most (if not all) elements will need to be styled with classes. What this means now is that

<div class="mdc-typography">
  <div class="mdc-layout-grid max-width">
    <div class="mdc-layout-grid__inner">
      <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">

      ```js
      // some js
      ```

      </div>
    </div>
  </div>
</div>

doesn't actually render the code as expected. Rather it renders as plain text. I guess I'm a little new to this. But what is the proper way to nest fenced code blocks within div tags with classes?

The rule for markdown is that it must be indented at least 4 spaces. I am aware of this.

Answer 1

If you are writing this on your jekyll project use

{% highlight javascript %}

{% endhighlight %}

Jekyll Docs

Here is another stack question similar to yours: link

Alternatively, you can style it like it's code.