remark-image-attributes

Parses markdown for images with attributes (lead by a #) and puts those attributes on a mdAST image node with key attributes and value of type Object.<string,string>.

The returned nodes also have an inline flag.

{
  type: 'image',
  ...
  attributes: { border: '3px dashed blue', cursor: 'pointer'},
  inline: false
}

Since this parser has been written to feed styles to gatsby-remark-image-attributes, the examples revolve around CSS properties; yet the parser does not care about the keys nor values, as long as the key=value; format is met.

Installation

npm install --save remark-image-attributes

How to use

Run this example with npm run example

Have an .md file with some images:

Add style attributes to the image
 
![some oranges](https://images.pexels.com/photos/2090903/pexels-photo-2090903.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260#width=1260;height=740)
 
You don't need an alt text
 
![](https://images.pexels.com/photos/3104856/pexels-photo-3104856.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260#box-shadow=0 1px 5px 5px;border-radius=50%;border-color=rgb(120,120,120))
 
Put your image wherever you want
 
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at ![happy](https://images.pexels.com/photos/2728493/pexels-photo-2728493.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940#width=200px;float=right) Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32

Have it parsed or processed by remark, using this plugin:

const vfile = require("to-vfile");
const remark = require("remark");
const remarkParser = require("remark-parse");
const remarkImageAttributes = require("../index.js");
const visit = require("unist-util-visit");
 
const markdown = vfile.readSync(`${__dirname}/example.md`);
 
const markdownAST = remark()
  .use(remarkParser, { position: false })
  .use(remarkImageAttributes)
  .parse(markdown);
 
visit(markdownAST, "image", node => console.log(node));

Get these 'image' type nodes:

{
  type: 'image',
  alt: 'some oranges',
  title: 'some oranges',
  url: 'https://images.pexels.com/photos/2090903/pexels-photo-2090903.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
  attributes: { width: '1260', height: '740' },
  inline: false
},
{
  type: 'image',
  alt: null,
  title: null,
  url: 'https://images.pexels.com/photos/3104856/pexels-photo-3104856.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260',
  attributes: {
    'box-shadow': '0 1px 5px 5px',
    'border-radius': '50%',
    'border-color': 'rgb(120,120,120)'
  },
  inline: false
},
{
  type: 'image',
  alt: 'happy',
  title: 'happy',
  url: 'https://images.pexels.com/photos/2728493/pexels-photo-2728493.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
  attributes: { width: '200px', float: 'right' },
  inline: true
}

Caveats

• The plugin doesn't recognize the title syntax but rather copies the [altText] to the title field.

  Beware: '<space>title' will become part of the last attribute!

  ![altText](https://image.com/foo.png#attribute=yes title)

  results in

  {
    type: 'image',
    alt: 'altText',
    title: 'altText',
    url: 'https://image.com/foo.png',
    attributes: { attribute: 'yes title' },
    inline: false
  }