简体   繁体   中英

Google prettifier line slicing and white background

When I add line numbers with more than 4 digit numbers it's lines are sliced out of the code box.

When I use background-color: #eee; all works great but it works not for white colour background-color: #fff; .

  1. How to fix line numbers slicing out of the code box?

  2. How to change all lines background to white?

PS White background has to be with line numbers:)

How it works right now (on picture: linenums:320 with 3 digit number it sliced badly only in Safari`, for Chrome it starts slicing since 4 digit numbers). But maybe we can make some margin or something else.

在此处输入图像描述

pre.prettyprint {
  background-color: #fff;
}
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 {
  list-style-type: decimal;
} 
<pre class="prettyprint linenums:3320">
def celsius_from_fahrenheit(temp):
    """
    Convert temperature value from Fahrenheit to Celsius.
    """
    return (temp - 32)*5.0 / 9.0

def fahrenheit_from_celsius(temp_fahrenheit):
    """
    Convert temperature value from Celsius to Fahrenheit.
    """
    return (temp_fahrenheit*9 + 160)
</pre>

Here is the example where you can check how it works. https://jsfiddle.net/rwjbdayu/7/

This is the answer that totally works for me. PS Safari bad visualize google prettifier

<style>
li.L0, li.L1, li.L2, li.L3, li.L4,
li.L5, li.L6, li.L7, li.L8, li.L9 
    {list-style-type: decimal !important; 
    background-color: #fff} 
</style>
<div class="google-auto-placed ap_container" style="text-align: left; width: 46%; height: auto; clear: none; margin: auto;">
    <pre class="prettyprint linenums:3320">
        def celsius_from_fahrenheit(temp):
            """
            Convert temperature value from Fahrenheit to Celsius.
            """
            return (temp - 32)*5.0 / 9.0

        def fahrenheit_from_celsius(temp_fahrenheit):
            """
            Convert temperature value from Celsius to Fahrenheit.
            """
            return (temp_fahrenheit*9 + 160)
    </pre>
</div>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM