firefrost-gaming/antigravity-skills-reference
3
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

improve markdown rendering (#213)

Browse Source 
* feat: add support for GFM and highlight in markdown rendering

* feat: enhance markdown rendering by splitting YAML frontmatter and body

* feat: improve markdown styling for light and dark themes

* feat: enhance frontmatter parsing and display in SkillDetail component
This commit is contained in:
SHUBHAM PATEL
2026-03-07 14:38:21 +05:30
committed by GitHub
parent 61ec71c5c7
commit 1b167e4ca1
4 changed files with 634 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
apps/web-app/src/index.css
View File

@@ -1,9 +1,108 @@
@import "tailwindcss";
@import 'github-markdown-css/github-markdown-light.css';
@import 'github-markdown-css/github-markdown.css';
@import 'highlight.js/styles/github.css' (prefers-color-scheme: light);
@import 'highlight.js/styles/github-dark.css' (prefers-color-scheme: dark);
.markdown-body {
color: var(--color-slate-800);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: var(--color-slate-900);
}
.markdown-body hr,
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td,
.markdown-body blockquote {
border-color: var(--color-slate-200);
}
.markdown-body code {
background-color: var(--color-slate-100);
color: var(--color-slate-900);
}
.markdown-body pre {
background-color: var(--color-slate-100);
border: 1px solid var(--color-slate-200);
}
.markdown-body pre code {
background-color: transparent;
}
@media (prefers-color-scheme: dark) {
@import 'github-markdown-css/github-markdown-dark.css';
.markdown-body {
color-scheme: dark;
color: var(--color-slate-200);
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
color: var(--color-slate-100);
}
.markdown-body hr,
.markdown-body table tr,
.markdown-body table th,
.markdown-body table td,
.markdown-body blockquote {
border-color: var(--color-slate-700);
}
.markdown-body code {
background-color: var(--color-slate-800);
color: var(--color-slate-100);
}
.markdown-body pre {
background-color: var(--color-slate-900);
border-color: var(--color-slate-700);
}
.markdown-body pre code,
.markdown-body pre .hljs,
.markdown-body pre .hljs-code,
.markdown-body pre .hljs-subst,
.markdown-body pre .hljs-punctuation,
.markdown-body pre .hljs-operator {
color: var(--color-slate-100) !important;
}
.markdown-body pre .hljs-comment,
.markdown-body pre .hljs-quote {
color: var(--color-slate-200) !important;
}
.markdown-body pre .hljs-keyword,
.markdown-body pre .hljs-selector-tag,
.markdown-body pre .hljs-built_in,
.markdown-body pre .hljs-section,
.markdown-body pre .hljs-title,
.markdown-body pre .hljs-name {
color: var(--color-sky-300) !important;
}
.markdown-body pre .hljs-string,
.markdown-body pre .hljs-literal,
.markdown-body pre .hljs-number,
.markdown-body pre .hljs-attr,
.markdown-body pre .hljs-template-tag,
.markdown-body pre .hljs-template-variable {
color: var(--color-emerald-300) !important;
}
}
:root {
@@ -11,5 +110,14 @@
}
body {
@apply bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-50 overflow-x-hidden;
background-color: var(--color-slate-50);
color: var(--color-slate-900);
overflow-x: hidden;
}
@media (prefers-color-scheme: dark) {
body {
background-color: var(--color-slate-950);
color: var(--color-slate-50);
}
}