Allowing for reusable content through includes

[thelovebug]

I wasn't sure whether this was a marpit or marp-core question, apologies if I got this wrong.

Is there any plan for an include directive that will allow me to have a separate file which will be imported at render-time?

For example:

---
theme: uncover
size: 4:3
---

# This is my first slide

---

<!-- include: static/content.md -->

---

# This will appear after the content contained within the include

This will permit me to use boilerplate text on all slidedecks, and make it much easier if information contained within the text changes, but also for things like church presentations where song words would need to be included in subsequent slidedecks.

[yhatt]

Both of Marpit and Marp Core are designed to work in anywhere, not only the local file system but also web app (Marp Web). So we cannot add the feature depending on local file system as our framework / core.

But you can extend the syntax via markdown-it plugins if you want. markdown-it-include may be helpful in this case.

[alanlivio]

Hi @yhatt.
I just found this issue and I have the same problem. Is it possible use setup this markdown-it-include directly from the md file. Because I am using marp from the VSCode extension? So I would like to avoid using the CLI.
Many thanks in advance for you reply.

[yhatt]

No, Marp for VS Code does not allow any plugins for users safety. You can use features only defined in Marp Core.

[alanlivio]

Thank you so much @yhatt.

What do you think about a solution based on JavaScript?
My scenario is that I have some code samples that I want to show in the presentation that want to be in separate files. So I need to get the code and highlight it. Something like discussed here or here.

It would be something similar to use mermaid inside markdown only, which works in VSCode.

[alanlivio]

I tried the follow code, but did not work.

---
map: true
theme: default
class: lead
backgroundColor: white
paginate: true
---

<pre><code class="language-java" data-src="./code/test.java"></code></pre>

---
<!-- Load Prism.js and the required languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>

<!-- Fetch and display the external code -->
<script>
window.addEventListener('vscode.markdown.updateContent', function() { 
  document.querySelectorAll('code[data-src]').forEach(codeBlock => {
    const src = codeBlock.getAttribute('data-src');
    fetch(src)
      .then(response => response.text())
      .then(data => {
        codeBlock.textContent = data;
        Prism.highlightElement(codeBlock);
      });
  });
});
</script>

[yhatt]

That is feasible given the principle of Markdown's transparency for HTML element <script>, but we do not recommend that approach because it may limit Markdown compatibillity with other Marp tools and Markdown as a document.

If you still want that, an inline script should wrap with HTML comment <!-- --> to get work. The common Markdown parser including Marp will sanitize > in Markdown contents by replacing to >, so JavaScript arrow function => will break by replacing =>.

• Avoid escaping <script> content marp#250
• Preserve HTML comments within html block marp-core#282

[alanlivio]

Many thanks @yhatt. It worked for me. For the ones that looking for a solution I can share the code bellow:

---
theme: default
class: lead
backgroundColor: white
paginate: true
marp: true
---

<pre>
<code class="language-java" data-src="code//Test.java">
</code>
</pre>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-------------code load and highlight--------------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
<!--
function updateCode(){
  document.querySelectorAll('code[data-src]').forEach(codeBlock => {
    const src = codeBlock.getAttribute('data-src');
    fetch(src)
      .then(response => response.text())
      .then(data => {
        codeBlock.textContent = data;
        hljs.highlightBlock(codeBlock);
      });
  });
}
window.addEventListener('vscode.markdown.updateContent', function() { updateCode(); });
updateCode();
-->
</script>
<!-------------code load and highlight--------------->

[calidion]

Can this feature work in vs code plugin now?

[yhatt]

@calidion Accept the situation and use Marp CLI. The reason why Marp/markdown-it plugins cannot be used in the VS Code extension is explained in marp-team/marp#543.