code-block-pro icon indicating copy to clipboard operation
code-block-pro copied to clipboard

Add word wrap in print styles

Open KevinBatdorf opened this issue 1 year ago • 0 comments

The cod egets cut off. Word wrap and line highlighting dont play nice together today but with print it will work.

@media print {
  .wp-block-kevinbatdorf-code-block-pro:not(#x) pre code {
    text-wrap: wrap !important;
  }
  .wp-block-kevinbatdorf-code-block-pro:not(#x) .line {
    min-width: 0 !important;
  }
}

edit: or maybe this in place of the text-wrap above

.wp-block-kevinbatdorf-code-block-pro:not(#x) pre code {
    white-space: pre-wrap !important; // or pre-wrap ?
}

Was suggested to add some context when printing

@media print {
    .wp-block-kevinbatdorf-code-block-pro:not(#x)::before {
        content: "Note: This code bay be improperly formatted when printing";
        display: block;
    }
}

KevinBatdorf avatar Apr 04 '24 20:04 KevinBatdorf