Google Prettify线条颜色超出可见区域(可滚动前)

时间:2018-06-05 14:25:21

标签: javascript html css twitter-bootstrap pretty-print

我希望使用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>
&#13;
&#13;
&#13;

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

As you can see the line highlighting stops

1 个答案:

答案 0 :(得分:0)

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

pre {
    display: flex;
}

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

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

ol.linenums {
    flex: 1;
}

希望这会有所帮助。