[Question] What options are allowed for the codehilite markdown extension?

[wmarshall484]

I'm using codehilite with the readthedocs theme. If I use the default config

markdown_extensions:
    - codehilite:

the code segments are highlighted, but they don't have a background:

If I add the linenums option to codehilite

markdown_extensions:
    - codehilite:
        linenums: True

then it does show a background, but the width varies with the size of the code block and there's no scrolling:

My question: is there any way to have codehilight highlighting with a colored background and scrolling? I couldn't find any documentation for what options codehilite allows. I would prefer not to use highlight.js.

[waylan]

The extension is documented here. Altering the appearance is controlled by CSS, not config options. However, there is no CSS provided by the extension. If you want to alter the appearance of the output, you will need to provide some custom CSS. See Styling your Docs for more info.

[waylan]

You can find a bunch of pre-made CSS files for Pygments here (the CodeHilite extension uses Pygments under-the-hood). There is even a previewer.

[facelessuser]

Yeah, it just requires a little CSS. I use Pygments with MkDocs instead of highlight.js myself.

[wmarshall484]

Perfect, thank you both! Thanks for the help. My code looks way better :)

[wmarshall484]

For future reference (in case anyone else has this question), the following is the setting in my mkdocs.yml:

extra_css:
  - css/extra.css
markdown_extensions:
    - codehilite:

and the exta.css file I put in my docs/extra_css directory:

.codehilite code, .codehilite pre{color:#3F3F3F;background-color:#F7F7F7;
overflow: auto;
box-sizing: border-box;

    padding: 0.01em 16px;
    padding-top: 0.01em;
    padding-right-value: 16px;
    padding-bottom: 0.01em;
    padding-left-value: 16px;
    padding-left-ltr-source: physical;
    padding-left-rtl-source: physical;
    padding-right-ltr-source: physical;
    padding-right-rtl-source: physical;

border-radius: 16px !important;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;

border: 1px solid #CCC !important;
    border-top-width: 1px;
    border-right-width-value: 1px;
    border-right-width-ltr-source: physical;
    border-right-width-rtl-source: physical;
    border-bottom-width: 1px;
    border-left-width-value: 1px;
    border-left-width-ltr-source: physical;
    border-left-width-rtl-source: physical;
    border-top-style: solid;
    border-right-style-value: solid;
    border-right-style-ltr-source: physical;
    border-right-style-rtl-source: physical;
    border-bottom-style: solid;
    border-left-style-value: solid;
    border-left-style-ltr-source: physical;
    border-left-style-rtl-source: physical;
    border-top-color: #CCC;
    border-right-color-value: #CCC;
    border-right-color-ltr-source: physical;
    border-right-color-rtl-source: physical;
    border-bottom-color: #CCC;
    border-left-color-value: #CCC;
    border-left-color-ltr-source: physical;
    border-left-color-rtl-source: physical;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image-source: none;
    border-image-slice: 100% 100% 100% 100%;
    border-image-width: 1 1 1 1;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;}
.codehilite .hll { background-color: #ffffcc }
.codehilite .c { color: #999988; font-style: italic } /* Comment */
.codehilite .err { color: #a61717; background-color: #e3d2d2 } /* Error */
.codehilite .k { color: #000000; font-weight: bold } /* Keyword */
.codehilite .o { color: #000000; font-weight: bold } /* Operator */
.codehilite .cm { color: #999988; font-style: italic } /* Comment.Multiline */
.codehilite .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */
.codehilite .c1 { color: #999988; font-style: italic } /* Comment.Single */
.codehilite .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
.codehilite .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
.codehilite .ge { color: #000000; font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #aa0000 } /* Generic.Error */
.codehilite .gh { color: #999999 } /* Generic.Heading */
.codehilite .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #555555 } /* Generic.Prompt */
.codehilite .gs { font-weight: bold } /* Generic.Strong */
.codehilite .gu { color: #aaaaaa } /* Generic.Subheading */
.codehilite .gt { color: #aa0000 } /* Generic.Traceback */
.codehilite .kc { color: #000000; font-weight: bold } /* Keyword.Constant */
.codehilite .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */
.codehilite .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */
.codehilite .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */
.codehilite .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */
.codehilite .kt { color: #445588; font-weight: bold } /* Keyword.Type */
.codehilite .m { color: #009999 } /* Literal.Number */
.codehilite .s { color: #d01040 } /* Literal.String */
.codehilite .na { color: #008080 } /* Name.Attribute */
.codehilite .nb { color: #0086B3 } /* Name.Builtin */
.codehilite .nc { color: #445588; font-weight: bold } /* Name.Class */
.codehilite .no { color: #008080 } /* Name.Constant */
.codehilite .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */
.codehilite .ni { color: #800080 } /* Name.Entity */
.codehilite .ne { color: #990000; font-weight: bold } /* Name.Exception */
.codehilite .nf { color: #990000; font-weight: bold } /* Name.Function */
.codehilite .nl { color: #990000; font-weight: bold } /* Name.Label */
.codehilite .nn { color: #555555 } /* Name.Namespace */
.codehilite .nt { color: #000080 } /* Name.Tag */
.codehilite .nv { color: #008080 } /* Name.Variable */
.codehilite .ow { color: #000000; font-weight: bold } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mf { color: #009999 } /* Literal.Number.Float */
.codehilite .mh { color: #009999 } /* Literal.Number.Hex */
.codehilite .mi { color: #009999 } /* Literal.Number.Integer */
.codehilite .mo { color: #009999 } /* Literal.Number.Oct */
.codehilite .sb { color: #d01040 } /* Literal.String.Backtick */
.codehilite .sc { color: #d01040 } /* Literal.String.Char */
.codehilite .sd { color: #d01040 } /* Literal.String.Doc */
.codehilite .s2 { color: #d01040 } /* Literal.String.Double */
.codehilite .se { color: #d01040 } /* Literal.String.Escape */
.codehilite .sh { color: #d01040 } /* Literal.String.Heredoc */
.codehilite .si { color: #d01040 } /* Literal.String.Interpol */
.codehilite .sx { color: #d01040 } /* Literal.String.Other */
.codehilite .sr { color: #009926 } /* Literal.String.Regex */
.codehilite .s1 { color: #d01040 } /* Literal.String.Single */
.codehilite .ss { color: #990073 } /* Literal.String.Symbol */
.codehilite .bp { color: #999999 } /* Name.Builtin.Pseudo */
.codehilite .vc { color: #008080 } /* Name.Variable.Class */
.codehilite .vg { color: #008080 } /* Name.Variable.Global */
.codehilite .vi { color: #008080 } /* Name.Variable.Instance */
.codehilite .il { color: #009999 } /* Literal.Number.Integer.Long */