Allow css to be set manually

myst_parser/html_renderer.py

@@ -20,16 +20,21 @@ def __init__(
         show_front_matter=True,
         use_pygments=False,
         as_standalone=False,
+        myst_css=None,
+        pygments_css=None,
     ):
         """This HTML render uses the same block/span tokens as the docutils renderer.
 
         It is used to test compliance with the commonmark spec.
         """
         self.show_comments = show_comments
         self.show_front_matter = show_front_matter
+        self.myst_css = myst_css
         self.use_pygments = use_pygments
+        self.pygments_css = pygments_css
         self.add_mathjax = add_mathjax
         self.as_standalone = as_standalone
+
         self._suppress_ptag_stack = [False]
 
         _span_tokens = self._tokens_from_module(myst_span_tokens)
@@ -63,9 +68,11 @@ def render_document(self, token):
             )
         if not self.as_standalone:
             return body
-        css = get_syntax_css()
+        css = get_syntax_css() if self.myst_css is None else self.myst_css
         if self.use_pygments:
-            css += pygments_css()
+            css += (
+                get_pygments_css() if self.pygments_css is None else self.pygments_css
+            )
         return minimal_html_page(body, css=css)
 
     def render_block_code(self, token):
@@ -168,7 +175,7 @@ def pygments_highlight(code: str, language: str):
         return None
 
 
-def pygments_css():
+def get_pygments_css():
     from pygments.formatters import HtmlFormatter
 
     return HtmlFormatter().get_style_defs(".highlight")

setup.py

@@ -42,7 +42,7 @@
         )
     ],
     extras_require={
-        "sphinx": ["pyyaml", "docutils>=0.15", "sphinx>=2,<3"],
+        "sphinx": ["pyyaml", "docutils>=0.15", "sphinx>=2,<3", "pygments"],
         "code_style": ["flake8<3.8.0,>=3.7.0", "black", "pre-commit==1.17.0"],
         "testing": [
             "coverage",

tests/test_renderers/test_html.py

@@ -113,6 +113,19 @@ def func(a):
 
         """
     )
+    pygments_css = dedent(
+        """\
+        .highlight  { background: #f8f8f8; }
+        .highlight .k { color: #008000; font-weight: bold } /* Keyword */
+        .highlight .nf { color: #0000FF } /* Name.Function */
+        .highlight .nb { color: #008000 } /* Name.Builtin */
+        .highlight .o { color: #666666 } /* Operator */
+        .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+        .highlight .si { color: #BB6688; font-weight: bold } /* Literal.String */
+        .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+        """
+    )
+
     out_string = parse_text(
         in_string,
         "html",
@@ -121,5 +134,6 @@ def func(a):
         show_front_matter=True,
         use_pygments=True,
         as_standalone=True,
+        pygments_css=pygments_css,
     )
     file_regression.check(out_string, extension=".html")

tests/test_renderers/test_html/test_minimal_html_page.html

@@ -32,75 +32,15 @@
 span.myst-role-content {
     color: black;
 }
-.highlight .hll { background-color: #ffffcc }
 .highlight  { background: #f8f8f8; }
-.highlight .c { color: #408080; font-style: italic } /* Comment */
-.highlight .err { border: 1px solid #FF0000 } /* Error */
 .highlight .k { color: #008000; font-weight: bold } /* Keyword */
-.highlight .o { color: #666666 } /* Operator */
-.highlight .ch { color: #408080; font-style: italic } /* Comment.Hashbang */
-.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
-.highlight .cpf { color: #408080; font-style: italic } /* Comment.PreprocFile */
-.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
-.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
-.highlight .gd { color: #A00000 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #FF0000 } /* Generic.Error */
-.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
-.highlight .gi { color: #00A000 } /* Generic.Inserted */
-.highlight .go { color: #888888 } /* Generic.Output */
-.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
-.highlight .gs { font-weight: bold } /* Generic.Strong */
-.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #0044DD } /* Generic.Traceback */
-.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #008000 } /* Keyword.Pseudo */
-.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #B00040 } /* Keyword.Type */
-.highlight .m { color: #666666 } /* Literal.Number */
-.highlight .s { color: #BA2121 } /* Literal.String */
-.highlight .na { color: #7D9029 } /* Name.Attribute */
-.highlight .nb { color: #008000 } /* Name.Builtin */
-.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
-.highlight .no { color: #880000 } /* Name.Constant */
-.highlight .nd { color: #AA22FF } /* Name.Decorator */
-.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
-.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
 .highlight .nf { color: #0000FF } /* Name.Function */
-.highlight .nl { color: #A0A000 } /* Name.Label */
-.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
-.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #19177C } /* Name.Variable */
-.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-.highlight .w { color: #bbbbbb } /* Text.Whitespace */
-.highlight .mb { color: #666666 } /* Literal.Number.Bin */
-.highlight .mf { color: #666666 } /* Literal.Number.Float */
-.highlight .mh { color: #666666 } /* Literal.Number.Hex */
-.highlight .mi { color: #666666 } /* Literal.Number.Integer */
-.highlight .mo { color: #666666 } /* Literal.Number.Oct */
-.highlight .sa { color: #BA2121 } /* Literal.String.Affix */
-.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
-.highlight .sc { color: #BA2121 } /* Literal.String.Char */
-.highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
-.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+.highlight .nb { color: #008000 } /* Name.Builtin */
+.highlight .o { color: #666666 } /* Operator */
 .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
-.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
-.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
-.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
-.highlight .sx { color: #008000 } /* Literal.String.Other */
-.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
-.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
-.highlight .ss { color: #19177C } /* Literal.String.Symbol */
-.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
-.highlight .fm { color: #0000FF } /* Name.Function.Magic */
-.highlight .vc { color: #19177C } /* Name.Variable.Class */
-.highlight .vg { color: #19177C } /* Name.Variable.Global */
-.highlight .vi { color: #19177C } /* Name.Variable.Instance */
-.highlight .vm { color: #19177C } /* Name.Variable.Magic */
-.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
+.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String */
+.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+
 </style>
 </head>
 <body>