feat(webui): remark upgrade + gfm + syntax highlighting#1444
feat(webui): remark upgrade + gfm + syntax highlighting#1444sudoforge merged 5 commits intogit-bug:masterfrom
Conversation
updates remark/rehype/unified to the latest versions, and reconfigures the markdown pipeline to be more efficient and use the latest plugins. the pipeline now includes GFM style features like code highlighting, footnotes, inline urls, and hard line breaks, and no longer double parses to html. also implements the first part of code highlighting in markdown, what's left is correctly bringing in theme css files
the full theme is loaded, but controled by a parent's data attribute.
p>div is not a valid nesting in HTML, and with strict-mode turned on, react complains about it. this fix allows labels to be inline, and then uses that in the LabelChange component to avoid getting hydration warnings from react
| <Route element={<NotFoundPage />} /> | ||
| </Routes> | ||
| </Layout> | ||
| </React.StrictMode> |
There was a problem hiding this comment.
gets us warnings for strict-mode violations in dev-mode, and nop in prod
| .use(rehypeSanitize as unknown as RehypePlugin) | ||
| .use(rehypeHighlight as unknown as RehypePlugin<RehypeHighlightOpts[]>, { | ||
| detect: true, | ||
| subset: ['text'], |
There was a problem hiding this comment.
the subset of languages syntax highlighting will try if no language is provided
- without
detect:true, code blocks without a given language have bad styling (no margin/padding) ['text']as a subset means we only bother trying plain text as the default, which does no additional highlighting.
There was a problem hiding this comment.
without detect:true, code blocks without a given language have bad styling (no margin/padding)
that's a weird design choice. good catch.
There was a problem hiding this comment.
I could have hacked together css to do it, but this was cleaner imo
There was a problem hiding this comment.
yeah, i see no issue with it. that's the behavior i would expect, tbh -- plain text unless i specify a language.
|
before/after screenshots: before light after light before dark after dark |
sudoforge
left a comment
sudoforge
left a comment
There was a problem hiding this comment.
lgtm. i like the better differentiation between code blocks and the comment background that this change brings in.
|
Love it |
3 participants
Labelcan now be made inline, which fixes a react hydration error on the bug page