Question

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

感谢。

＆＃13;

<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>

＆＃13;

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

Answer 1

我遇到了同样的问题，发现以下CSS可以解决此问题：

pre {
    display: flex;
}

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

没有代码的区域将不会扩展到可用宽度，因此将使用不同的宽度显示不同的代码段。要解决此问题，您还需要执行以下操作：

ol.linenums {
    flex: 1;
}

希望这会有所帮助。

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

1 个答案: