美文网首页
代码块样式修复

代码块样式修复

作者: IT小C | 来源:发表于2016-04-02 17:27 被阅读65次

    前端时间在amazeUI的官方社区了发帖推广之后,有好几个小伙伴给我提了意见,希望增加代码高亮,这样方便阅读代码。
    于是我把所有文章的代码块部分都用了CoolFormat工具进行了高亮转换。
    但是在移动端显示的时候,会出现代码块内容过长,超出了屏幕的情况,一直没时间来弄。
    今天正好有空,把这个问题给修复了一下,之后会把最新版的源码更新到Github上。

    function fixed_code(){
        //修复代码高亮的样式问题
        var total_width = $(".ke-zeroborder").parent("div").width();
        var left_width = $(".ke-zeroborder td:first-child").width();
        left_width = 28; //左侧代码行超过10行和小于10行的宽度不一样,统一成最大的28px
        var margin_width = 16; //左右margin7px加上分割线2px
        var right_width = total_width - left_width - margin_width;
        $(".ke-zeroborder td:last-child").find("div").css("overflow", "hidden").css("width", right_width + "px");
    }
    

    相关文章

      网友评论

          本文标题:代码块样式修复

          本文链接:https://www.haomeiwen.com/subject/yqzylttx.html