Embed 3rd party service like Youtube, Tweet, Gist...

[shashank-k]

I am trying to embed github gists into the notes.

If something like this exists, it will be excellent.

---

IssueHunt Summary

Backers (Total: $7.00)

• ritikchhipa5 ($2.00)
• $5.00 have been anonymously funded.

Become a backer now!

Or submit a pull request to get the deposits!

Tips

• Checkout the Issuehunt explorer to discover more funded issues.
• Need some help from other developers? Add your repositories on IssueHunt to raise funds.

[Flexo013]

This is not possible at the moment, but sounds like a useful feature.

[Rokt33r]

Sounds good to me. We could exploit ImageReference syntax, ![{description}]({url}), for this.(or introduce other syntax, like [$gist:{gistId}]).

And I found this issue. https://github.com/remarkjs/ideas/issues/9 Although gist doesn't support oembed.

[Rokt33r]

https://github.com/djm/remark-shortcodes looks quite promising. So I guess we could do make it like [[gist id=1234]].

[issuehunt-oss[bot]]

An anonymous user has funded $5.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[Erprincekumarojha]

You contact me I will try

[Flexo013]

@Erprincekumarojha Feel free to pick up this issue and submit a PR for it. When your PR gets merged you will receive the funding for this issue!

[themagiulio]

Hi, I'm trying to implement this by using remark-shortcodes as suggested by @Rokt33r

I archived to create shortcuts for strings, but I can't put <a></a>.

I wrote these lines of code which are meant to put in the MarkdownPreviewer an <a></a> which points to the given url.

  const shortcodeTransformer = () => {
    return (tree: any, file: any) => {
      visit(tree, 'shortcode', function(node) {
        let attrs = node.attributes;

        node.type = 'a';
        node.href = 'https://boostnote.io';
        node.children = [{type: 'text', value: 'https://boostnote.io'}];
      });
    }
  };

Unfortunately it shows only a block with the string 'https://boostnote.io' as a children...

Can someone explain me how does render work?

[Flexo013]

@themagiulio Please join our Slack and DM Rokt33r directly. He'll be able to help you out.

[issuehunt-oss[bot]]

@ritikchhipa5 has funded $2.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.