Swatch.md

Swatch Image Tags

A Markdown image tag has the syntax ![alt](src), which renders as an HTML <img> element, where alt is usually interpreted as the alt (alternate text) attribute of the generated HTML image, and src is the image source (e.g., https://example.com/SomeImage.png). Smartdown extends the Markdown image syntax with a feature called Swatch which allows a Markdown image tag to be annotated such that it will synthesize an image, rather than loading an image from the internet. Currently, this synthesized image is a colored square, although the concept is extrapolable to a variety of synthesized sizes, shapes and images.

For example, the swatch syntax below:

I am an orange swatch: ![swatch](orange)

Produces the following output:

I am an orange swatch:

The keyword swatch is required in the image tag's alt section; in other words, between the square brackets (![swatch]). The swatch's color is specified in the image tag's src section between parentheses and may be either a color name or a CSS color hex value. For example:

• ![swatch](orange):
• ![swatch](#00CC00):

Inlining Swatches

Swatch-style image tags behave exactly like URL-based image tags, and can be inlined within text, and can even abut other images or Swatches. For example:

A magenta swatch .

A grid of swatches:

Dynamic Swatches

Although Smartdown swatches don't currently have any inherent reactivity with Smartdown variables, the idea of a dynamic swatch is easily implemented by using an output cell of type markdown, and inserting the appropriate swatch Smartdown code into the cell's associated variable. For example, below we have a grid of output cells which are to be formatted as markdown output cells.

Note: There appears to be a bug in how markdown cells are rendered. Instead of a grid, each cell is getting its own line. I'm guessing that there is a CSS problem where display: inline is not being applied in the case of a generated [swatch]() cell. I need to create an Issue for this.

Meanwhile, here's a Markdown table with the same information.

And we have an associated playable (below), which periodically (once per 5 sec) changes the grid by adjusting the Smartdown within each cell to be a swatch image.

function swatchify(color) {
  return `![swatch](${color})`;
}

const colors = [
  'red',
  'green',
  'blue',
  'yellow',
  'orange',
  'magenta',
  'cyan',
  'lightblue',
  'darkslateblue',
];

function getRandomColor() {
  const index = Math.floor(Math.random() * 9);
  return colors[index];
}

function updateGrid() {
  const updateVars = {};

  for (let i = 0; i < 3; i += 1) {
    for (let j = 0; j < 3; j += 1) {
      updateVars[`swatch${i}${j}`] = swatchify(getRandomColor());
    }
  }
  smartdown.set(updateVars);
  window.setTimeout(updateGrid, 2000);
}

updateGrid();
window.setTimeout(updateGrid, 2000);

---

Back to Home