Google Prettify线条颜色超出可见区域（可滚动前）

Question

我希望使用Google Prettify在预标记上扩展行突出显示。 这就是我所拥有的。 我正在寻找一种尽可能扩展线条突出显示的方法。

谢谢。

 <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"> <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script> <style> pre { max-height: 100%; /* These aren't needed for Google Chrome, but are needed for Edge to force no-wrap*/ word-break: normal !important; word-wrap: normal !important; white-space: pre !important; } </style> </head> <body> <pre id="code_insert" class="prettyprint linenums lang-java pre-scrollable"> public static void main(String[] args) { System.out.println("If you scroll past the visible area, really really really really really far, the line highlighting is going to break......"); return; } </pre> <script> PR.prettyPrint(); </script> </body> </html>

这就是Google Chrome 66和Microsoft Edge 41（Windows 10）上的输出效果。

Answer 1

我遇到了同样的问题，发现以下CSS修复了它：

pre {
    display: flex;
}

现在我可以向侧面滚动代码，正确突出显示行。

有了这个，没有代码的区域将不会扩展到可用的宽度，因此将使用不同的宽度显示不同的代码片段。 要解决这个问题，您还需要这样做：

ol.linenums {
    flex: 1;
}

希望这可以帮助。

Google Prettify线条颜色超出可见区域（可滚动前）

问题描述

1 个解决方案

解决方案1
0 2018-12-13 10:11:45

Google Prettify线条颜色超出可见区域（可滚动前）

问题描述

1 个解决方案

解决方案1 0 2018-12-13 10:11:45

解决方案1
0 2018-12-13 10:11:45