EnlighterJS实现手机端可以水平滚动

530次阅读
没有评论

WordPress有很多代码高亮插件,但我用了好几个,比如google的prettyprint、SyntaxHighlighter Evolved之类的,最后发现还是Enlighter好用。 然后发现手机端代码会被挤在一起,不太方便阅读,所以这边给出一个手机端支持水平滑动的方法:

加入以下自定义CSS即可实现手机端水平滚动:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px){

.EnlighterJS{
   width: auto !important;
   overflow-x: scroll !important;
   word-wrap: normal !important;
}
.EnlighterJS li{
  white-space: pre !important;
}
}

但是上面这个并不是最好用的,手机端的高亮行并不会显示完整。下面的这个才是最完美的:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
{
.EnlighterJS {
         width: auto !important;
         overflow-x: auto !important;
         word-wrap: normal !important;
}

ul.EnlighterJS{
   display: grid;
}

.EnlighterJS li{
        white-space: pre !important;
  display: table-caption;
}
}

最后看看效果: EnlighterJS实现手机端可以水平滚动

每天学
版权声明:本站原创文章,由每天学2020-03-14发表,共计665字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
载入中...