Comments (2)
@valeriangalliat any thoughts about this?! This code smells... specially the token.attrPush(['style','position:relative;padding-left:16px;margin-left:-16px;'])
from markdown-it-anchor.
That particular line was a hack of mine. Please disregard for the purposes of this proposal.
Here's code for renderTargetLink
// added by HB, copied and modified renderPermalink
const renderTargetlink = (slug, opts, state, idx, text, tag) => {
const space = () =>
Object.assign(new state.Token('text', '', 0), { content: ' ' })
const linkTokens = [
Object.assign(new state.Token('link_open', 'a', 1), {
attrs: [
['class', opts.targetlinkClass],
['id', slug],
['data-text',text],
['data-level',tag],
['aria-hidden', 'true']
]
}),
Object.assign(new state.Token('html_block', '', 0), { content: '' }),
new state.Token('link_close', 'a', -1)
]
// `push` or `unshift` according to position option.
// Space is at the opposite side.
linkTokens[position[(!opts.permalinkBefore).toString()]](space())
state.tokens[idx + 1].children[position[opts.permalinkBefore]](...linkTokens)
}
here are the defaults for the new properties:
let defaults = {
...
useTargetlink:false,
renderTargetlink,
targetlinkClass: 'target-anchor hash-anchor',
headerClassName:'content-header',
}
here's the target-anchor class
a.target-anchor {
position:absolute;
top:-64px;
}
So, the point is, the permalink goes after the target anchor when selected, which places the link 64p below the link to leave room for the fixed title.
(I use hash-anchor
for identification -- no styles -- to pull the anchors out of the dom for creation of a table of contents, so ignore that too)
from markdown-it-anchor.
Related Issues (20)
- Add container around heading and anchor HOT 3
- Expose custom options regardless of permalink styles HOT 4
- Headings containing a hashtag yield invalid hrefs HOT 2
- Headers in html_block Tokens aren't given slugs HOT 11
- Add <span> inside permalink.headerLink style until safari reader more is fixed HOT 1
- incorrect type for permalink.headerLink() HOT 2
- Feature request: container option for linkAfterHeader HOT 5
- KaTeX Expressions aren't Included in Headings HOT 4
- Should return type for `PermalinkGenerator` be `void` instead of `string`? HOT 1
- Missing `wrapper` property in `LinkAfterHeaderPermalinkOptions` type HOT 1
- Add brief description of what plugin does to top of readme. HOT 1
- Types invalid with `"type": "module"` and `"moduleResolution": "Node16"` HOT 7
- @types in peerDeps HOT 2
- TypeError: c.attrGet is not a function HOT 1
- Missing #todo-anchor-or-file header in README HOT 1
- Exception 'plugin.apply is not a function' HOT 2
- Colon in header doesn't work HOT 6
- Upgrade markdown-it types to v14 HOT 1
- more icons for "symbol" HOT 3
- Advice for keeping permalink symbol token stable HOT 5
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 markdown-it-anchor.