Giter VIP home page Giter VIP logo

Comments (2)

nagaozen avatar nagaozen commented on June 22, 2024

@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.

HenrikBechmann avatar HenrikBechmann commented on June 22, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.