embed code fragments from external sources

[jthegedus]

I would like to import fenced code from GitHub repo files similar to https://docsify.js.org/#/embed-files?id=embedded-code-fragments

Is this on the roadmap?

---

IssueHunt Summary

### Sponsors (Total: $100.00) - [ issuehunt](https://issuehunt.io/u/issuehunt) ($100.00) #### [Become a sponsor now!](https://issuehunt.io/r/egoist/docute/issues/205) #### [Or submit a pull request to get the deposits!](https://issuehunt.io/r/egoist/docute/issues/205) ### Tips - Checkout the [Issuehunt explorer](https://issuehunt.io/r/egoist/docute/) to discover more funded issues. - Need some help from other developers? [Add your repositories](https://issuehunt.io/r/new) on IssueHunt to raise funds.

[egoist]

Yeah but probably using a different syntax, like:

<!-- embed foo.js as code block -->
#embed(/foo.js code language="js")

<!-- result: -->
```js
// content in foo.js

A fragment:

```markdown
#embed(/foo.md fragment)

<!-- result: -->

something to embed

Where foo.md looks like:

# title

<!-- docute-embed-start -->

something to embed

<!-- docute-embed-end -->

[jthegedus]

Sounds great! A couple more things :stuck_out_tongue: is it possible to add support for:

• these files to be externally loaded?
• adding arbitrary fencing?

For instance:

<!-- embed example.js as code block -->
#embed(
  https://raw.githubusercontent.com/someuser/somerepo/code/example.js
  type=code
  language="js"
  fence="some-demo"
)

<!-- .../example.js -->
...
/// [some-demo-start]
...
/// [some-demo-end]
...

<!-- result -->
// some content from example.js within the /// [some-demo]

and then

<!-- import content from other .md file -->
#embed(
  https://raw.githubusercontent.com/someuser/somerepo/example.md
  type=fragment
  fence="some-fragment"
)

<!-- .../exmaple.md -->
...
<!-- some-fragment-start -->
something to embed
<!-- some-fragment-end -->
...

Being able to define the fence allows multiple partials from a single file to be imported.

Externally loading code decouples the need for it to live alongside the documentation, say in an examples repo.

[egoist]

The api.processMarkdown(fn) API now can return a Promise:

You can probably implement it as a plugin using this API:

const embedPlugin = () => {
  return {
    name: 'embed',
    extend(api) {
      api.processMarkdown(async markdown => {
        return modifiedMarkdown
      })
    }
  }
}

new Docute({
  plugins: [embedPlugin()]
})

[jthegedus]

Sweet, I'll give this a go soon! Cheers!

[IssueHuntBot]

@issuehunt has funded $100.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.

[janat08]

Can i take this?

[jthegedus]

@janat08 Feel free. I got caught up with life!

[janat08]

@egoist please merge, its been half a year