Skip to content

Commit bc722aa

Browse files
dshkolclaude
andcommitted
Add: Syntax highlighting for R code blocks
- Dark theme (VS Code Dark+ inspired) for code in details sections - Styled collapsible details/summary elements - Colors for comments, strings, functions, keywords, etc. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 0c455ef commit bc722aa

1 file changed

Lines changed: 67 additions & 0 deletions

File tree

docs/style.css

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -681,3 +681,70 @@
681681
align-items: stretch;
682682
}
683683
}
684+
685+
/* ============================================
686+
Code Blocks & Syntax Highlighting
687+
============================================ */
688+
689+
/* Details/Summary for collapsible code */
690+
#observablehq-main details {
691+
margin: 1.5rem 0;
692+
border: 1px solid var(--border-color);
693+
border-radius: 4px;
694+
background: var(--bg-light);
695+
}
696+
697+
#observablehq-main details summary {
698+
padding: 0.75rem 1rem;
699+
font-weight: 600;
700+
font-size: 0.875rem;
701+
cursor: pointer;
702+
color: var(--text-secondary);
703+
}
704+
705+
#observablehq-main details summary:hover {
706+
color: var(--statcan-red);
707+
}
708+
709+
#observablehq-main details[open] summary {
710+
border-bottom: 1px solid var(--border-color);
711+
}
712+
713+
/* Code blocks inside details */
714+
#observablehq-main details pre {
715+
margin: 0;
716+
border-radius: 0 0 4px 4px;
717+
background: #1e1e1e;
718+
overflow-x: auto;
719+
}
720+
721+
#observablehq-main details pre code {
722+
display: block;
723+
padding: 1rem;
724+
font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
725+
font-size: 0.8125rem;
726+
line-height: 1.5;
727+
color: #d4d4d4;
728+
}
729+
730+
/* Syntax highlighting - VS Code Dark+ inspired */
731+
.hljs-comment { color: #6a9955; }
732+
.hljs-string { color: #ce9178; }
733+
.hljs-number { color: #b5cea8; }
734+
.hljs-keyword { color: #569cd6; }
735+
.hljs-operator { color: #d4d4d4; }
736+
.hljs-punctuation { color: #d4d4d4; }
737+
.hljs-function { color: #dcdcaa; }
738+
.hljs-built_in { color: #4ec9b0; }
739+
.hljs-variable { color: #9cdcfe; }
740+
.hljs-title { color: #dcdcaa; }
741+
.hljs-params { color: #9cdcfe; }
742+
.hljs-attr { color: #9cdcfe; }
743+
.hljs-type { color: #4ec9b0; }
744+
.hljs-meta { color: #c586c0; }
745+
.hljs-tag { color: #569cd6; }
746+
.hljs-name { color: #4ec9b0; }
747+
.hljs-attribute { color: #9cdcfe; }
748+
.hljs-selector-tag { color: #d7ba7d; }
749+
.hljs-selector-class { color: #d7ba7d; }
750+
.hljs-selector-id { color: #d7ba7d; }

0 commit comments

Comments
 (0)