mirror of
https://github.com/gromlab-ru/svg-sprites.git
synced 2026-07-22 20:50:19 +03:00
refactor: заменить shiki на самописный highlighter и обновить архитектуру
- Удалён shiki (9.5→0 МБ), создан regex-токенизатор для html/css/xml - CLI переведён с аргументов на конфиг-файл svg-sprites.config.ts - Превью переработано: React-приложение вместо инлайн HTML - Добавлен футер с названием пакета и ссылкой на репозиторий - Исправлена загрузка dev-data.js для Vite 8 - Футер прижат к низу, содержимое центрировано
This commit is contained in:
85
preview/src/ui/code-block/styles/code-block.module.css
Normal file
85
preview/src/ui/code-block/styles/code-block.module.css
Normal file
@@ -0,0 +1,85 @@
|
||||
.root {
|
||||
position: relative;
|
||||
border-radius: var(--radius-2);
|
||||
overflow: hidden;
|
||||
background: var(--color-code-bg);
|
||||
}
|
||||
|
||||
.pre {
|
||||
margin: 0;
|
||||
padding: var(--space-4);
|
||||
overflow-x: auto;
|
||||
font-size: 12px;
|
||||
font-family: var(--font-mono);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.code {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
:global(:root[data-theme='light']) .code {
|
||||
--hl-tag: #116329;
|
||||
--hl-attr: #0550ae;
|
||||
--hl-string: #0a3069;
|
||||
--hl-comment: #8b949e;
|
||||
--hl-punctuation: #6639ba;
|
||||
--hl-selector: #6639ba;
|
||||
--hl-property: #0550ae;
|
||||
--hl-color: #0a3069;
|
||||
--hl-number: #0550ae;
|
||||
--hl-function: #0550ae;
|
||||
}
|
||||
|
||||
:global(:root[data-theme='dark']) .code {
|
||||
--hl-tag: #7ee787;
|
||||
--hl-attr: #79c0ff;
|
||||
--hl-string: #a5d6ff;
|
||||
--hl-comment: #8b949e;
|
||||
--hl-punctuation: #d2a8ff;
|
||||
--hl-selector: #d2a8ff;
|
||||
--hl-property: #79c0ff;
|
||||
--hl-color: #a5d6ff;
|
||||
--hl-number: #79c0ff;
|
||||
--hl-function: #d2a8ff;
|
||||
}
|
||||
|
||||
.code :global(.hl-tag),
|
||||
.code :global(.hl-attr),
|
||||
.code :global(.hl-string),
|
||||
.code :global(.hl-comment),
|
||||
.code :global(.hl-punctuation),
|
||||
.code :global(.hl-selector),
|
||||
.code :global(.hl-property),
|
||||
.code :global(.hl-color),
|
||||
.code :global(.hl-number),
|
||||
.code :global(.hl-function) {
|
||||
color: var(--hl-tag);
|
||||
}
|
||||
|
||||
.code :global(.hl-attr) { color: var(--hl-attr); }
|
||||
.code :global(.hl-string) { color: var(--hl-string); }
|
||||
.code :global(.hl-comment) { color: var(--hl-comment); }
|
||||
.code :global(.hl-punctuation) { color: var(--hl-punctuation); }
|
||||
.code :global(.hl-selector) { color: var(--hl-selector); }
|
||||
.code :global(.hl-property) { color: var(--hl-property); }
|
||||
.code :global(.hl-color) { color: var(--hl-color); }
|
||||
.code :global(.hl-number) { color: var(--hl-number); }
|
||||
.code :global(.hl-function) { color: var(--hl-function); }
|
||||
|
||||
.copyButton {
|
||||
position: absolute;
|
||||
top: var(--space-2);
|
||||
right: var(--space-2);
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: 11px;
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-1);
|
||||
color: var(--color-muted);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copyButton:hover {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
Reference in New Issue
Block a user