我希望使用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;
这就是Google Chrome 66及其上的输出效果。 Microsoft Edge 41(Windows 10)。
答案 0 :(得分:0)
我遇到了同样的问题,发现以下CSS可以解决此问题:
pre {
display: flex;
}
现在,我可以向侧面滚动代码,以正确突出显示行。
没有代码的区域将不会扩展到可用宽度,因此将使用不同的宽度显示不同的代码段。要解决此问题,您还需要执行以下操作:
ol.linenums {
flex: 1;
}
希望这会有所帮助。