How can I customize code block?

[TetraTheta]

By default, this code will create un-wrapped code block that has horizontal scroll bar.

```plaintext
--add-modules=jdk.incubator.vector -XX:+UseG1GC -XX:+ParallelRefProcEnabled -XX:MaxGCPauseMillis=200 -XX:+UnlockExperimentalVMOptions -XX:+DisableExplicitGC -XX:+AlwaysPreTouch -XX:G1HeapWastePercent=5 -XX:G1MixedGCCountTarget=4 -XX:InitiatingHeapOccupancyPercent=15 -XX:G1MixedGCLiveThresholdPercent=90 -XX:G1RSetUpdatingPauseTimePercent=5 -XX:SurvivorRatio=32 -XX:+PerfDisableSharedMem -XX:MaxTenuringThreshold=1 -Dusing.aikars.flags=https://mcflags.emc.gs -Daikars.new.flags=true -XX:G1NewSizePercent=30 -XX:G1MaxNewSizePercent=40 -XX:G1HeapRegionSize=8M -XX:G1ReservePercent=20
```

code-block-panel module convert this Markdown code into beautiful HTML code like this:

<div class="highlight">
  <pre tabindex="0" class="chroma">
    <code class="language-plaintext" data-lang="plaintext">
      <span class="line">
        <span class="ln">1</span>
        <span class="cl">--add-modules=jdk.incubator.vector -XX:+UseG1GC -XX:+ParallelRefProcEnabled -XX:MaxGCPauseMillis=200 -XX:+UnlockExperimentalVMOptions -XX:+DisableExplicitGC -XX:+AlwaysPreTouch -XX:G1HeapWastePercent=5 -XX:G1MixedGCCountTarget=4 -XX:InitiatingHeapOccupancyPercent=15 -XX:G1MixedGCLiveThresholdPercent=90 -XX:G1RSetUpdatingPauseTimePercent=5 -XX:SurvivorRatio=32 -XX:+PerfDisableSharedMem -XX:MaxTenuringThreshold=1 -Dusing.aikars.flags=https://mcflags.emc.gs -Daikars.new.flags=true -XX:G1NewSizePercent=30 -XX:G1MaxNewSizePercent=40 -XX:G1HeapRegionSize=8M -XX:G1ReservePercent=20</span>
      </span>
    </code>
    <div class="code-block-panel-wrapper">
      <div class="code-block-panel">
        <button class="code-block-action code-block-action-ln">
          <svg aria-hidden="true" class="bi bi-list-ol hi-svg-inline" fill="currentColor" height="1.25rem" viewBox="0 0 16 16" width="1.25rem" xmlns="http://www.w3.org/2000/svg"></svg>
        </button>
        <button class="code-block-action code-block-action-wrap">
          <svg aria-hidden="true" class="bi bi-text-wrap hi-svg-inline" fill="currentColor" height="1.25rem" viewBox="0 0 16 16" width="1.25rem" xmlns="http://www.w3.org/2000/svg"></svg>
        </button>
        <button class="code-block-action code-block-action-expand">
          <svg aria-hidden="true" class="bi bi-chevron-expand hi-svg-inline" fill="currentColor" height="1.25rem" viewBox="0 0 16 16" width="1.25rem" xmlns="http://www.w3.org/2000/svg"></svg>
        </button>
        <button class="code-block-action code-block-action-copy">
          <svg aria-hidden="true" class="bi bi-clipboard hi-svg-inline" fill="currentColor" height="1.25rem" viewBox="0 0 16 16" width="1.25rem" xmlns="http://www.w3.org/2000/svg"></svg>
        </button>
      </div>
    </div>
  </pre>
</div>

But writer cannot decide the default appearance of this code block, like whether display line number or whether wrap the content of the code block, etc.

The official documentation didn't mention about it neither.

If user clicks 'Line Number' button (first one), it will add code-no-ln class to the div pre code.
If user clicks 'Wrap Code' button (second one), it will add code-wrap class to the div pre code.
I don't know what the 'Expand' button (third one) does. It looks like it does nothing on my side.

I want to pre-define these in Markdown, like this:

```plaintext {.code-wrap .code-no-ln}
--add-modules=jdk.incubator.vector -XX:+UseG1GC -XX:+ParallelRefProcEnabled -XX:MaxGCPauseMillis=200 -XX:+UnlockExperimentalVMOptions -XX:+DisableExplicitGC -XX:+AlwaysPreTouch -XX:G1HeapWastePercent=5 -XX:G1MixedGCCountTarget=4 -XX:InitiatingHeapOccupancyPercent=15 -XX:G1MixedGCLiveThresholdPercent=90 -XX:G1RSetUpdatingPauseTimePercent=5 -XX:SurvivorRatio=32 -XX:+PerfDisableSharedMem -XX:MaxTenuringThreshold=1 -Dusing.aikars.flags=https://mcflags.emc.gs -Daikars.new.flags=true -XX:G1NewSizePercent=30 -XX:G1MaxNewSizePercent=40 -XX:G1HeapRegionSize=8M -XX:G1ReservePercent=20
```

If it works as I want, this code block won't display line number and wrap the content.

But using plaintext {.code-wrap .code-no-ln} only adds .code-wrap .code-no-ln to the <div class="highlight"> like <div class="highlight code-wrap code-no-ln">.
The added class won't affect code block inside of it.
There is no way to pass these classes to div pre code.

How can I customize the default look of the code block, via Markdown?

I might be able to create Javascript or Post-processor that automatically 'relays' class of div to div pre code, but that doesn't look intuitive to me.

[razonyang]

Have you tried the parameters?

I don't know what the 'Expand' button (third one) does. It looks like it does nothing on my side.

Expand works only on code lines is over than the max lines, there is example on the docs site......

[razonyang]

If you want to specify parameters for particular code block, there is data-max-lines for this,

I don't have plan to implement this for other parameters, you can read the implementation of data-max-lines and inspired from it, and then create a PR.

```text {data-max-lines=3}
LINE 1
LINE 2
LINE 3
LINE 4
```