https://github.com/atomashevic/quarto-dracula
Dracula theme for Quarto HTML documents
Science Score: 13.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
○CITATION.cff file
-
✓codemeta.json file
Found codemeta.json file -
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Committers with academic emails
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Low similarity (8.9%) to scientific vocabulary
Keywords
Repository
Dracula theme for Quarto HTML documents
Basic Info
Statistics
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
- Releases: 0
Topics
Metadata Files
README.md
Dracula Theme for Quarto HTML Documents
This is a simple scss file that can be used to apply the Dracula theme to Quarto HTML documents.
I used the basic colors from the Dracula theme and applied them to the Quarto HTML theme. Also, math font is increased for better readability.
Obviously, it looks best when paired with Dracula syntax highlighting for code blocks which is already implemented in Quarto.
You can see the live example here.
Usage
To use this theme, simply copy the dracula.scss file to your project and include it in your Quarto configuration file.
```yaml project: type: website
website: title: "Website Title"
format: html: theme: dracula.scss highlight-style: dracula ```
Issues
Callouts are not working
This piece of code is not working. This is solvable, probably answers can be found here: https://github.com/quarto-dev/quarto-cli/discussions/4755
```scss // Callout Styles .callout { padding: 1em; margin: 1em 0; border-left: 5px solid $secondary !important; background-color: lighten($body-bg, 5%) !important; }
.callout-note.callout { border-left-color: $callout-note-border !important; background-color: $callout-note-bg !important; }
.callout-warning.callout { border-left-color: $callout-warning-border !important; background-color: $callout-warning-bg !important; }
.callout-important.callout { border-left-color: $callout-important-border !important; background-color: $callout-important-bg !important; }
.callout-tip.callout { border-left-color: $callout-tip-border !important; background-color: $callout-tip-bg !important; }
.callout-caution.callout { border-left-color: $callout-caution-border !important; background-color: $callout-caution-bg !important; } ```
If you can fix this, PRs are welcome!
Math font size
If you find the math font size too big, you can adjust it by changing these lines in the dracula.scss file:
```scss
// Math Expressions .math { font-size: 120%; // Change this value to adjust the math font size in math blocks }
// Increase font size for inline math in paragraphs and lists p .math, li .math, blockquote .math { font-size: 110%; // Change this value to adjust the inline math font size } ```
Owner
- Name: Aleksandar Tomašević
- Login: atomashevic
- Kind: user
- Location: Novi Sad, Serbia
- Company: University of Novi Sad
- Website: www.atomasevic.com
- Twitter: atomasevic
- Repositories: 2
- Profile: https://github.com/atomashevic
GitHub Events
Total
Last Year
Committers
Last synced: 11 months ago
Top Committers
| Name | Commits | |
|---|---|---|
| Aleksandar Tomašević | 3****c | 5 |
Issues and Pull Requests
Last synced: 11 months ago
All Time
- Total issues: 0
- Total pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Total issue authors: 0
- Total pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0
Past Year
- Issues: 0
- Pull requests: 0
- Average time to close issues: N/A
- Average time to close pull requests: N/A
- Issue authors: 0
- Pull request authors: 0
- Average comments per issue: 0
- Average comments per pull request: 0
- Merged pull requests: 0
- Bot issues: 0
- Bot pull requests: 0