Data

Tools

Indexes

Applications

Experiments

Open Source Science

quarto-preview-colour

A Quarto extension to add preview colour as a coloured symbol next to colour code.

https://github.com/mcanouil/quarto-preview-colour

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (8.2%) to scientific vocabulary

Keywords

preview-colour quarto quarto-extension quarto-pub quartopub
Last synced: 6 months ago · JSON representation ·

Repository

A Quarto extension to add preview colour as a coloured symbol next to colour code.

Basic Info
Statistics
  • Stars: 23
  • Watchers: 1
  • Forks: 0
  • Open Issues: 4
  • Releases: 6
Topics
preview-colour quarto quarto-extension quarto-pub quartopub
Created over 2 years ago · Last pushed 9 months ago
Metadata Files
Readme Funding License Citation

README.md

Preview Colour Extension For Quarto

preview-colour is a Quarto extension that automatically renders colour previews for inline colour codes in both inline code blocks and regular text. It supports multiple colour formats including hex, RGB, HSL, and HWB values. It supports rendering in various output formats such as HTML, Reveal.js, PDF (via LaTeX), Beamer (LaTeX), Typst, Word, and PowerPoint.

Installation

You can install this extension using the Quarto CLI:

bash quarto add mcanouil/quarto-preview-colour

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

Usage

Basic Setup

Add the extension to your document's YAML front matter:

yaml filters: - preview-colour

qmd - code: `#441100` or `rgb(10, 100, 200)` - text: #441100 or rgb(10,100,200)

[!NOTE] Colour codes should be placed in inline code blocks (alone) or regular text.

❌ Invalid: - `"My colour is #441100"` - `["#441100", "#114400"]`

✅ Valid: - `#441100`

Configuration Options

Configure which elements should show colour previews:

yaml extensions: preview-colour: code: true # Enable previews for inline code text: false # Enable previews for regular text

Supported Colour Formats

  • ❌ Names one: orange (will probably never be supported)
  • ✅ hex codes:
    • ✅ code: #441100
    • ✅ text: #441100
  • ✅ short hex codes:
    • ✅ code: #F03
    • ✅ text: #F03
  • 🔶 rgb:
    • ✅ code: rgb(10, 100, 200)
    • ✅ code (no space): rgb(10,100,200)
    • ❌ text: rgb(10, 100, 200)
    • ✅ text (no space): rgb(10,100,200)
  • 🔶 rgb with %:
    • ✅ code: rgb(100%, 20%, 100%)
    • ✅ code (no space): rgb(100%,20%,100%)
    • ❌ text: rgb(100%, 20%, 100%)
    • ✅ text (no space): rgb(100%,20%,100%)
  • 🔶 hwb:
    • ✅ code: hwb(135 0% 40%)
    • ❌ text: hwb(135 0% 40%)
  • 🔶 hsl:
    • ✅ code: hsl(240, 100%, 50%)
    • ✅ code (no space): hsl(240,100%,50%)
    • ❌ text: hsl(240, 100%, 50%)
    • ✅ text (no space): hsl(240,100%,50%)

Examples

Here is the source code for a minimal example: example.qmd.

Outputs of example.qmd:

Owner

  • Name: Mickaël Canouil
  • Login: mcanouil
  • Kind: user
  • Location: Lille, France

Biostatistician, Ph. D. (& cinephile) @RLille User Group Organiser

Citation (CITATION.cff) 

cff-version: 1.2.0
title: "Preview Colour Extension for Quarto"
message: "If you use this project, please cite it as below."
type: software
authors:
  - family-names: "Canouil"
    given-names: "Mickaël"
    orcid: "https://orcid.org/0000-0002-3396-4549"
repository-code: "https://github.com/mcanouil/quarto-preview-colour"
url: "http://m.canouil.dev/quarto-preview-colour/"
license: "MIT"
date-released: "2025-07-22"
version: 1.0.3

GitHub Events

Total
  • Create event: 15
  • Release event: 2
  • Issues event: 4
  • Watch event: 5
  • Delete event: 18
  • Issue comment event: 1
  • Push event: 31
  • Pull request event: 22
Last Year
  • Create event: 15
  • Release event: 2
  • Issues event: 4
  • Watch event: 5
  • Delete event: 18
  • Issue comment event: 1
  • Push event: 31
  • Pull request event: 22

Issues and Pull Requests

Last synced: about 1 year ago

All Time
  • Total issues: 5
  • Total pull requests: 9
  • Average time to close issues: 26 days
  • Average time to close pull requests: 1 minute
  • Total issue authors: 2
  • Total pull request authors: 1
  • Average comments per issue: 0.8
  • Average comments per pull request: 0.0
  • Merged pull requests: 7
  • Bot issues: 0
  • Bot pull requests: 0
Past Year
  • Issues: 2
  • Pull requests: 5
  • Average time to close issues: 26 days
  • Average time to close pull requests: 1 minute
  • Issue authors: 1
  • Pull request authors: 1
  • Average comments per issue: 0.0
  • Average comments per pull request: 0.0
  • Merged pull requests: 3
  • Bot issues: 0
  • Bot pull requests: 0
View more stats
Top Authors
Issue Authors
  • mcanouil (4)
  • andrewheiss (1)
Pull Request Authors
  • mcanouil (20)
  • github-actions[bot] (2)
Top Labels
Issue Labels
Priority: [1] Low (4) Difficulty: [2] Intermediate (3) Type: Epic :sparkles: (1) Type: Enhancement :bulb: (1) Type: Refactor :fire: (1) Type: Bug :bug: (1) Difficulty: [1] Novice (1) Type: CI/CD :robot: (1)
Pull Request Labels
Type: Enhancement :bulb: (12) Type: CI/CD :robot: (5) Type: Refactor :fire: (4) Type: Bug :bug: (1)

Packages

  • Total packages: 1
  • Total downloads: unknown
  • Total dependent packages: 0
  • Total dependent repositories: 0
  • Total versions: 3
proxy.golang.org: github.com/mcanouil/quarto-preview-colour
  • Versions: 3
  • Dependent Packages: 0
  • Dependent Repositories: 0
Rankings
Dependent packages count: 6.4%
Average: 6.7%
Dependent repos count: 6.9%
Last synced: 6 months ago