Skip to content

Fix whitespace view in code #2043

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 23, 2024
Merged

Fix whitespace view in code #2043

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
dc05f85
Fix whitespace view in code
thesayfulla Dec 22, 2024
8fd4841
Use pygments preferred way of wrapping with code element.
tim-schilling Dec 23, 2024
8d12f42
Respect whitespace with the w whitespace class.
tim-schilling Dec 23, 2024
5b0e50c
Regenerate pygments css styles and document the process.
tim-schilling Dec 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion debug_toolbar/panels/templates/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
144 changes: 88 additions & 56 deletions debug_toolbar/static/debug_toolbar/css/toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
Loading