Change scroll bar in markdown code snippet

[jacoporepossi]

Hi there,

I have a question regarding markdown code snippets. I wonder how I could avoid text overflow so that the text is more legible.

Here's my current situation:

I'd love to have automatic text wrap. How could I achieve that? Is it also possible to add colors in text?

[jacoporepossi]

I think I solve it adding white-space: pre-wrap in the _base.scss file

/**
 * Code formatting
 */
pre,
code {
  @include relative-font-size(0.9375);
  color: $text-color;
}

*:not(pre) > code {
  padding: 3px 6px;
  border-radius: 3px;
  background-color: #eee;
  margin: 0 5px;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;    <--------- here
  position: relative;
  background-color: #f0f0f0;

I still don't how how I could add text formatting inside a code block though

[jeffreytse]

Hi @jacoporepossi

Thanks for the questions. In factor, the code block is used to show code in their raw format, which means do not add behavior of word wrap. But you can make the behavior by the following code snippet in the _base.scss file:

code.hljs.plaintext {
    white-space: pre-wrap;
}

Thanks & Regards