我正在寻找使用 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) 上的输出结果。
最佳答案
我遇到了同样的问题，发现下面的 CSS 解决了这个问题:
pre {
display: flex;
}
现在我可以横向滚动代码，这些行已正确突出显示。
有了这个，没有代码的区域将不会扩展到可用宽度，因此不同的代码片段将使用不同的宽度显示。要解决此问题，您还需要执行以下操作:
ol.linenums {
flex: 1;
}
希望这对您有所帮助。
关于javascript - Google Prettify 线条颜色超出可见区域(可预滚动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50702559/