• 没啥好说,更新慢

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

Wordpress 每天学 来源:原创 7个月前 (03-14) 254次浏览

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手机端可以滑动的效果图


每天学 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:EnlighterJS实现手机端可以水平滚动
赞(1)
分享到: 更多 (0)

为了阻止垃圾和反动评论,您必须才能发表评论,使用功能只需要1分钟注册好账号!