Merge pull request django-commons#2043 from thesayfulla/whitespace-rendering

Fix whitespace view in code

Author: tim-schilling

debug_toolbar/panels/templates/views.py

@@ -56,7 +56,7 @@ def template_source(request):
     except ModuleNotFoundError:
         source = format_html("<code>{}</code>", source)
     else:
-        source = highlight(source, HtmlDjangoLexer(), HtmlFormatter())
+        source = highlight(source, HtmlDjangoLexer(), HtmlFormatter(wrapcode=True))
         source = mark_safe(source)
 
     content = render_to_string(

debug_toolbar/static/debug_toolbar/css/toolbar.css

@@ -556,62 +556,94 @@
 #djDebug .highlight .err {
     color: var(--djdt-font-color);
 } /* Error */
-#djDebug .highlight .g {
-    color: var(--djdt-font-color);
-} /* Generic */
-#djDebug .highlight .k {
-    color: var(--djdt-font-color);
-    font-weight: bold;
-} /* Keyword */
-#djDebug .highlight .o {
-    color: var(--djdt-font-color);
-} /* Operator */
-#djDebug .highlight .n {
-    color: var(--djdt-font-color);
-} /* Name */
-#djDebug .highlight .mi {
-    color: var(--djdt-font-color);
-    font-weight: bold;
-} /* Literal.Number.Integer */
-#djDebug .highlight .l {
-    color: var(--djdt-font-color);
-} /* Literal */
-#djDebug .highlight .x {
-    color: var(--djdt-font-color);
-} /* Other */
-#djDebug .highlight .p {
-    color: var(--djdt-font-color);
-} /* Punctuation */
-#djDebug .highlight .m {
-    color: var(--djdt-font-color);
-    font-weight: bold;
-} /* Literal.Number */
-#djDebug .highlight .s {
-    color: var(--djdt-template-highlight-color);
-} /* Literal.String */
-#djDebug .highlight .w {
-    color: #888888;
-} /* Text.Whitespace */
-#djDebug .highlight .il {
-    color: var(--djdt-font-color);
-    font-weight: bold;
-} /* Literal.Number.Integer.Long */
-#djDebug .highlight .na {
-    color: var(--djdt-template-highlight-color);
-} /* Name.Attribute */
-#djDebug .highlight .nt {
-    color: var(--djdt-font-color);
-    font-weight: bold;
-} /* Name.Tag */
-#djDebug .highlight .nv {
-    color: var(--djdt-template-highlight-color);
-} /* Name.Variable */
-#djDebug .highlight .s2 {
-    color: var(--djdt-template-highlight-color);
-} /* Literal.String.Double */
-#djDebug .highlight .cp {
-    color: var(--djdt-template-highlight-color);
-} /* Comment.Preproc */
+
+/*
+Styles for pygments HTMLFormatter
+
+- This should match debug_toolbar/panels/templates/views.py::template_source
+- Each line needs to be prefixed with #djDebug .highlight as well.
+- The .w definition needs to include:
+    white-space: pre-wrap
+
+To regenerate:
+
+    from pygments.formatters import HtmlFormatter
+    print(HtmlFormatter(wrapcode=True).get_style_defs())
+ */
+#djDebug .highlight pre { line-height: 125%; }
+#djDebug .highlight td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+#djDebug .highlight span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
+#djDebug .highlight td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+#djDebug .highlight span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
+#djDebug .highlight .hll { background-color: #ffffcc }
+#djDebug .highlight .c { color: #3D7B7B; font-style: italic } /* Comment */
+#djDebug .highlight .err { border: 1px solid #FF0000 } /* Error */
+#djDebug .highlight .k { color: #008000; font-weight: bold } /* Keyword */
+#djDebug .highlight .o { color: #666666 } /* Operator */
+#djDebug .highlight .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
+#djDebug .highlight .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
+#djDebug .highlight .cp { color: #9C6500 } /* Comment.Preproc */
+#djDebug .highlight .cpf { color: #3D7B7B; font-style: italic } /* Comment.PreprocFile */
+#djDebug .highlight .c1 { color: #3D7B7B; font-style: italic } /* Comment.Single */
+#djDebug .highlight .cs { color: #3D7B7B; font-style: italic } /* Comment.Special */
+#djDebug .highlight .gd { color: #A00000 } /* Generic.Deleted */
+#djDebug .highlight .ge { font-style: italic } /* Generic.Emph */
+#djDebug .highlight .ges { font-weight: bold; font-style: italic } /* Generic.EmphStrong */
+#djDebug .highlight .gr { color: #E40000 } /* Generic.Error */
+#djDebug .highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
+#djDebug .highlight .gi { color: #008400 } /* Generic.Inserted */
+#djDebug .highlight .go { color: #717171 } /* Generic.Output */
+#djDebug .highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
+#djDebug .highlight .gs { font-weight: bold } /* Generic.Strong */
+#djDebug .highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
+#djDebug .highlight .gt { color: #0044DD } /* Generic.Traceback */
+#djDebug .highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
+#djDebug .highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
+#djDebug .highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
+#djDebug .highlight .kp { color: #008000 } /* Keyword.Pseudo */
+#djDebug .highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
+#djDebug .highlight .kt { color: #B00040 } /* Keyword.Type */
+#djDebug .highlight .m { color: #666666 } /* Literal.Number */
+#djDebug .highlight .s { color: #BA2121 } /* Literal.String */
+#djDebug .highlight .na { color: #687822 } /* Name.Attribute */
+#djDebug .highlight .nb { color: #008000 } /* Name.Builtin */
+#djDebug .highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
+#djDebug .highlight .no { color: #880000 } /* Name.Constant */
+#djDebug .highlight .nd { color: #AA22FF } /* Name.Decorator */
+#djDebug .highlight .ni { color: #717171; font-weight: bold } /* Name.Entity */
+#djDebug .highlight .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
+#djDebug .highlight .nf { color: #0000FF } /* Name.Function */
+#djDebug .highlight .nl { color: #767600 } /* Name.Label */
+#djDebug .highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+#djDebug .highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
+#djDebug .highlight .nv { color: #19177C } /* Name.Variable */
+#djDebug .highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
+#djDebug .highlight .w { color: #bbbbbb; white-space: pre-wrap } /* Text.Whitespace */
+#djDebug .highlight .mb { color: #666666 } /* Literal.Number.Bin */
+#djDebug .highlight .mf { color: #666666 } /* Literal.Number.Float */
+#djDebug .highlight .mh { color: #666666 } /* Literal.Number.Hex */
+#djDebug .highlight .mi { color: #666666 } /* Literal.Number.Integer */
+#djDebug .highlight .mo { color: #666666 } /* Literal.Number.Oct */
+#djDebug .highlight .sa { color: #BA2121 } /* Literal.String.Affix */
+#djDebug .highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
+#djDebug .highlight .sc { color: #BA2121 } /* Literal.String.Char */
+#djDebug .highlight .dl { color: #BA2121 } /* Literal.String.Delimiter */
+#djDebug .highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
+#djDebug .highlight .s2 { color: #BA2121 } /* Literal.String.Double */
+#djDebug .highlight .se { color: #AA5D1F; font-weight: bold } /* Literal.String.Escape */
+#djDebug .highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
+#djDebug .highlight .si { color: #A45A77; font-weight: bold } /* Literal.String.Interpol */
+#djDebug .highlight .sx { color: #008000 } /* Literal.String.Other */
+#djDebug .highlight .sr { color: #A45A77 } /* Literal.String.Regex */
+#djDebug .highlight .s1 { color: #BA2121 } /* Literal.String.Single */
+#djDebug .highlight .ss { color: #19177C } /* Literal.String.Symbol */
+#djDebug .highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
+#djDebug .highlight .fm { color: #0000FF } /* Name.Function.Magic */
+#djDebug .highlight .vc { color: #19177C } /* Name.Variable.Class */
+#djDebug .highlight .vg { color: #19177C } /* Name.Variable.Global */
+#djDebug .highlight .vi { color: #19177C } /* Name.Variable.Instance */
+#djDebug .highlight .vm { color: #19177C } /* Name.Variable.Magic */
+#djDebug .highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
 
 #djDebug svg.djDebugLineChart {
     width: 100%;