Comments (9)
I need to have something like this:
<a href="link_url" target="_blank" rel="nofollow noopener noreferrer" class="external">link_title
<span role="img" class="anticon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path></path>
</svg>
</span>
</a>
So I need to be able to pass className
to a
and to span
. I also need to pass role="img"
to span
.
At the moment I have the following for the content
:
content: h('span', {role: 'img', class: 'anticon'}, s('svg', {xmlns: 'http://www.w3.org/2000/svg', viewBox: '64 64 896 896', focusable: 'false', width: '1em', height: '1em', fill: 'currentColor', ariaHidden: 'true'}, s('path', {d: ''})))
But without classes and the span
is wrapped in another span
from remark-external-links.
No, we use icons only for external links. Internal links are managed by gatsby-plugin-catch-links.
from remark-external-links.
Would the CSS selector a[rel]
or a[target]
be a potential solution to use instead of the class?
from remark-external-links.
Yes, sure, I've created the PR above. But I'm new to programming, so I don't really know what's the right way to do it.
from remark-external-links.
Could you tell us more about the higher-level thing you want to achieve? Maybe thatβs better done in a custom-made plugin?
from remark-external-links.
Might your case also in the end need for example classes or icons for local/internal links (#heading
or /same/site
)?
from remark-external-links.
Yes, a[rel]
works.
from remark-external-links.
Ah great!!
For the properties, that can be done! Would you be interested in working on a PR for that? Something like:
contentProperties = settings.contentProperties || {}
// ...
data: {hName: 'span', hProperties: extend(true, contentProperties), hChildren: extend(true, content)}
In index.js
?
from remark-external-links.
Closed by GH-16.
from remark-external-links.
Related Issues (11)
- Update for changes in remark HOT 3
- Add option to append text/markup HOT 6
- HTML Anchor tags aren't accounted HOT 2
- plugin overwrites node data.hProperties set by other remark plugins HOT 1
- Ignoring specific URLs HOT 2
- Add to remarkjs npm org HOT 3
- is it possible to exclude fragment anchors? HOT 3
- Whitelisting domains? HOT 3
- Add more support HOT 2
- mailto links (weird behavior) HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from remark-external-links.