feat: prism highlighting #33
Conversation
…thub.io into blog-preview2
components/Markdown.css
Outdated
| p>code { | ||
| background-color: light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%)); | ||
| outline: 0.15em solid light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%)); | ||
| } | ||
|
|
||
| pre:has(code) { | ||
| outline: 1rem solid var(--neutral-100); | ||
| background-color: var(--neutral-100); | ||
| outline: 1rem solid light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%)); | ||
| background-color: light-dark(hsl(230, 1%, 98%), hsl(220, 13%, 18%)); | ||
| overflow: auto; | ||
| } |
There was a problem hiding this comment.
suggestion: What are these colors? Let's try to use the same bg colors as before if it still looks good. Otherwise at least make them variables.
components/Markdown.css
Outdated
| background-color: var(--neutral-400); | ||
| -webkit-border-radius: 3px; | ||
| } | ||
| } |
There was a problem hiding this comment.
nitpick: Missing newline
components/Markdown.css
Outdated
| >*:first-child { | ||
| margin-top: 0 !important; | ||
| } | ||
|
|
||
| > *:last-child { | ||
| >*:last-child { | ||
| margin-bottom: 0 !important; | ||
| } |
There was a problem hiding this comment.
nitpick: Revert formatting
| * One Dark theme & One Light theme for prism.js stolen and meddled with for this site | ||
| * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax |
There was a problem hiding this comment.
issue: Add proper attribution or simply import the CSS directly from there.
public/prism.css
Outdated
| /* Styling the buttons */ | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>button, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>a, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>span { | ||
| background: light-dark(hsl(230, 1%, 90%), hsl(220, 13%, 26%)); | ||
| color: light-dark(hsl(230, 6%, 44%), hsl(220, 9%, 55%)); | ||
| padding: 0.1em 0.4em; | ||
| border-radius: 0.3em; | ||
| } | ||
|
|
||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:hover, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>button:focus, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:hover, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>a:focus, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:hover, | ||
| div.code-toolbar>.toolbar.toolbar>.toolbar-item>span:focus { |
There was a problem hiding this comment.
suggestion: Looks an awful lot like a place where you could just use CSS nesting.
| /* Previewers plugin overrides */ | ||
| /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ |
There was a problem hiding this comment.
nitpick: Comment formatting and proper attribution.
| langPrefix: "language-", | ||
| highlight(code, lang, _info) { | ||
| lang = languageAliases[lang] ?? lang; | ||
| const language = Prism.languages[lang] ?? Prism.languages.autoit; |
There was a problem hiding this comment.
question: Isn't autoit the hotkey language? You should default to no highlighting.
There was a problem hiding this comment.
isnt our default language the autohotkey language?
There was a problem hiding this comment.
nah wait wrong language its this one https://www.autoitscript.com/site/autoit/
Co-authored-by: Elias Sjögreen <[email protected]>
…thub.io into blog-preview2
No description provided.