From dc05f85446262a0c0ce0e83cb749e179bb4badf9 Mon Sep 17 00:00:00 2001 From: Sayfulla Mirkhalikov Date: Sun, 22 Dec 2024 23:21:07 +0500 Subject: [PATCH 1/4] Fix whitespace view in code --- debug_toolbar/panels/templates/views.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/debug_toolbar/panels/templates/views.py b/debug_toolbar/panels/templates/views.py index be6893e0f..e0c956c68 100644 --- a/debug_toolbar/panels/templates/views.py +++ b/debug_toolbar/panels/templates/views.py @@ -57,7 +57,7 @@ def template_source(request): source = format_html("{}", source) else: source = highlight(source, HtmlDjangoLexer(), HtmlFormatter()) - source = mark_safe(source) + source = mark_safe(f"{source}") content = render_to_string( "debug_toolbar/panels/template_source.html", From 8fd4841e85d269c1c4c73e5b3b1c5d8894225cbe Mon Sep 17 00:00:00 2001 From: Tim Schilling Date: Mon, 23 Dec 2024 08:22:06 -0600 Subject: [PATCH 2/4] Use pygments preferred way of wrapping with code element. --- debug_toolbar/panels/templates/views.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/debug_toolbar/panels/templates/views.py b/debug_toolbar/panels/templates/views.py index e0c956c68..898639c54 100644 --- a/debug_toolbar/panels/templates/views.py +++ b/debug_toolbar/panels/templates/views.py @@ -56,8 +56,8 @@ def template_source(request): except ModuleNotFoundError: source = format_html("{}", source) else: - source = highlight(source, HtmlDjangoLexer(), HtmlFormatter()) - source = mark_safe(f"{source}") + source = highlight(source, HtmlDjangoLexer(), HtmlFormatter(wrapcode=True)) + source = mark_safe(source) content = render_to_string( "debug_toolbar/panels/template_source.html", From 8d12f425caf0912bfe02e8635b52a63c47925ee4 Mon Sep 17 00:00:00 2001 From: Tim Schilling Date: Mon, 23 Dec 2024 08:23:51 -0600 Subject: [PATCH 3/4] Respect whitespace with the w whitespace class. --- debug_toolbar/static/debug_toolbar/css/toolbar.css | 1 + 1 file changed, 1 insertion(+) diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index 8a19ab646..9c00f6525 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -591,6 +591,7 @@ } /* Literal.String */ #djDebug .highlight .w { color: #888888; + white-space: pre-wrap; } /* Text.Whitespace */ #djDebug .highlight .il { color: var(--djdt-font-color); From 5b0e50c7de9cd4573a20debe2ef76889b5442af2 Mon Sep 17 00:00:00 2001 From: Tim Schilling Date: Mon, 23 Dec 2024 08:32:11 -0600 Subject: [PATCH 4/4] Regenerate pygments css styles and document the process. --- .../static/debug_toolbar/css/toolbar.css | 145 +++++++++++------- 1 file changed, 88 insertions(+), 57 deletions(-) diff --git a/debug_toolbar/static/debug_toolbar/css/toolbar.css b/debug_toolbar/static/debug_toolbar/css/toolbar.css index 9c00f6525..a8699a492 100644 --- a/debug_toolbar/static/debug_toolbar/css/toolbar.css +++ b/debug_toolbar/static/debug_toolbar/css/toolbar.css @@ -556,63 +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; - white-space: pre-wrap; -} /* 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%;