arobase-che / remark-attr Goto Github PK

Would be cool, if this package supported adding attributes to angle-bracket links like

<example.com>{.some .classes}

Hello,

Custom data attributes are valid html attributes but I can't find a way to use them.

![](img.jpg){data-id=2}

should generate:

<img src="img.jpg" data-id="2">

Thank you

Hi,
I am trying to use remark and the module remark-attr for the first time in a project but I am getting the following error:

/node_modules/remark-attr/dist/index.js:352
    throw new Error('Missing parser to attach `remark-attr` [link] (to)');
          ^

Error: Missing parser to attach `remark-attr` [link] (to)
    at Function.remarkAttr (/project/node_modules/remark-attr/dist/index.js:352:11)
    at Function.freeze (file:///project/node_modules/unified/lib/index.js:136:36)
    at Function.process (file:///project/node_modules/unified/lib/index.js:375:15)
    at file:///project/index.js:21:6
    at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:541:24)
    at async loadESM (node:internal/process/esm_loader:91:5)
    at async handleMainPromise (node:internal/modules/run_main:65:12)

Node.js v18.7.0

The package.json is:

{
  "name": "remark-attr",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "rehype-stringify": "^9.0.3",
    "remark-attr": "^0.11.1",
    "remark-parse": "^10.0.1",
    "remark-rehype": "^10.1.0",
    "unified": "^10.1.2"
  },
  "type": "module"
}

The index.js is:

import {unified} from 'unified'
import remarkParse from 'remark-parse'
import stringify from 'rehype-stringify'
import remark2rehype from 'remark-rehype'
import remarkAttr from 'remark-attr'


const testFile = `

Here a test :

![ache avatar](https://ache.one/res/ache.svg){ height=100 }

`

unified()
    .use(remarkParse)
    .use(remarkAttr)
    .use(remark2rehype)
    .use(stringify)
    .process(testFile, (err, file) => {
        console.log(String(file))
    })

Can you help?

I really wanted to use the remark and rehype but if there is no solution I really need to find another alternative because the markdown will use a lot of attributes in markdown.

Please let know if there is a solution.
Thank you for your time

Hello, when I use your Remark-attr I found an issue: let eaten = oldParser.call(self, eat, value, silent); can't work well during build (using webpack tool in React). The error is —— call can't use. BTW, I found your codes in github are different with npm(for instance, index.js). Which is the latest version? Thank you!

Is there any reason why key/class/id attributes are not supported?

I use this plugin with react-markdown

I can't seem to get attributes for images, other elements such as <em/> work fine
Are images supported?

Img is not listed in supported.elements but the readme includes the following example:

![alt](img){attrs} / ![alt](img){ height=50 }

Hi,

I'm unsure if this is an issue of MDX or remark-attr.

I can't appear to use:

This is a paragraph.{.class-name}

I tried adding 'p' and 'paragraph' to the options.elemets as well.

Is this intended?

Thanks for this plugin!

The following syntax is relatively common (Pandoc, markdown-it-attrs, etc.). It’d be great if remark-attr could support it.

## My heading {#my-heading}

Pandoc additionally supports:

## My heading ## {#my-heading}

My heading {#my-heading}
----------

is adding classes possible?

![Image](https://picsum.photos/4000/6016?image=949){:.className}

I didn't find anything in readme.

Hi!

remark is switching to a new parser (and compiler) internally (micromark, remarkjs/remark#536), which will break this plugin.
Keep an eye out for remark-footnotes, remark-frontmatter, remark-gfm, remark-math, and other syntax plugins similar to this one, which could serve as inspiration for this plugin. Typically, these syntax plugins will be small wrapper code around micromark and mdast extensions btw. Also: feel free to ask me questions!

Could you add support for the linkReference node? I tried forking and extending the plugin myself, but I ultimately couldn't make it work.

The problem

The following markdown:

[first link](http://example.com/1){hreflang="en"}   <!-- works -->
[second link][reference]{hreflang="en"}             <!-- doesn't work -->
[third link][]{hreflang="en"}                       <!-- doesn't work -->

[reference]:  http://example.com/2
[third link]: http://example.com/3

produces the following HTML output:

<a href="http://example.com/1" hreflang="en">first link</a>
<a href="http://example.com/2">second link</a>{hreflang="en"}
<a href="http://example.com/3">third link</a>{hreflang="en"}

instead of:

<a href="http://example.com/1" hreflang="en">first link</a>
<a href="http://example.com/2" hreflang="en">second link</a>
<a href="http://example.com/3" hreflang="en">third link</a>

Happy new year!

Do you while we can get rid of this code: https://github.com/arobase-che/remark-attr/blob/master/src/index.js#L194

If we still need it we might need to improve the algorithm here. I've found several cases where the attrs are being picked up when they shouldn't... for example:

```html
code {info=string}
This is an awesome code
```

will apply the info="string" attribute to the outer code block.

My workaround, for now, is to add attr markup to prevent remark-attr from diving into the value:

```html {}
code {info=string}
This is an awesome code
```

I've found that if you look at the mdast generated when using remark-attr it includes undefined values. This isn't a problem if you run the mdast through remark2rehype since it removes the undefined props from the HTML... but it does pollute the mdast.

See here: https://runkit.com/hypercubed/5b61cfc3fca99600122d0541

At the moment, the separate package remark-bracketed-spans supports the following syntax:

This is [a span]{#id .class key=value}

Would it make sense to include support for spans in remark-attr? Then it would contain everything related to attributes.

The functionality of remark-bracketed-spans wouldn’t have to be reimplemented, it could just be imported and re-exported (maybe as an option, to avoid breaking existing code).

I'm using docusaurus which uses rehype/remark and added remark-attr. Other markups like links, headers, etc. are working fine but image tags just don't get any attributes added. I also tested the paragraph branch which works fine with paragraphs.

Is there any test I could do to help diagnose the problem with images further?
I'm using

![img](img.png){class="none"}

which leads to

<img alt="img" src="/assets/images/img-2ce0a3f91f9b6ea2d3149cbaab375986.png">

Images are obviously copied to another folder and the src attribute rewritten in the way. This might just be the reason.

Any reason this does not or cannot work with fenced code... for example:

```html{ style="..." }
<p>Hello</p>
```

ATX-style cannot specify attributes if the header has inline syntax.

• Sample project: https://github.com/akabekobeko/verify-remark/tree/main/remark-attr

Markdown:

# Header 1 {#header-1}

# Header 2
{#header-2}

# Header 3 **with text** {#header-3}

Expected:

<h1 id="header-1">Header 1</h1>
<h1 id="header-2">Header 2</h1>
<h1 id="header-3">Header 3 <strong>with text</strong></h1>

Actual:

<h1 id="header-1">Header 1</h1>
<h1 id="header-2">Header 2</h1>
<h1>Header 3 <strong>with text</strong> {#header-3}</h1>

{# header-3} remains as text content.

I have tried several registry of npm to install remark-attr package with version 0.8.2. It seems that dist/index.js file is missing, which is defined as the entry point in package.json.
A re-publish might be required. ;-)