我试图将
Highlight.js与Blogger整合.到目前为止,语法突出显示效果非常好,但我似乎找不到一种防止< pre>< code>内的代码行的方法.元素自动包装.我需要的是浏览器显示一个水平滚动条.
我在博客模板中添加了以下内容,在< head>结尾处,如网站中所述：
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'/>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
</script>
我的所有使用实例是：
<pre><code class='cpp'> // code here; 'class' changed according to language. </code></pre>
我试图编辑Highlight.js的CSS文件无效.我也尝试设置pre和代码样式overflow-x属性滚动,没有任何改变.我的猜测是,Blogger会覆盖全球的房产.
有没有人知道一种方法来克服这个问题,避免代码行在代码区域的末尾包装/打破,而不是显示水平滚动条？
解决方法
在打开这个
issue on the GitHub page之后,作者证实线路缠绕没有被他的脚本完成.
之后,我在CSS中做了更多的工作,并且能够通过覆盖highlight.js的.hljs样式来解决这个问题.这是我设法防止文本换行并允许滚动的唯一方法.这可能不是最好的或唯一的修复,但就我所知的CSS而言,以下是我添加到Blogger模板的代码.
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/solarized_dark.min.css' rel='stylesheet'/>
<style type='text/css'>
pre,code {
white-space: pre;
overflow-x: scroll;
}
.hljs {
display: inline-block;
overflow-x: scroll;
padding: 0.5em;
padding-right: 100%;
background: #002b36;
color: #839496;
-webkit-text-size-adjust: none;
}
</style>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js'></script>
<script type='text/javascript'>
hljs.initHighlightingOnLoad();
</script>
我已将显示更改为内嵌块,并添加了overflow-x：scroll和padding-right：100％.填充似乎阻止代码区缩小到最长文本行的大小.