Insert html

[pajaro1966]

I would like to insert html code and see it rendered in Marp. Is it possible?
The html code show texts with interlinear translations like this:

In Markdown files I can usually add html code and it's rendered nicely, but I cannot reproduce this in Marp.
If possible I would like to use CSS in order to control the code rendition.

This is the code:

<hr/>
<div style="margin-top:1px; font-family: Times; font-size:26px; line-height: 20px;">
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;">με</span>
<span style="font-size: 75%; color:grey;border: solid; border-width:1px; border-padding:4px; border-radius: 5px; display: block; padding: 3px;">me</span></span>
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;">λένε</span>
<span style="font-size: 75%; color:grey;border: solid; border-width:1px; border-padding:4px; border-radius: 5px; display: block; padding: 3px;">dicen</span></span>
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;">Αντόνιο</span>
<span style="font-size: 75%; color:grey;border: solid; border-width:1px; border-padding:4px; border-radius: 5px; display: block; padding: 3px;">Antonio</span></span>
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;">Ρεβουέλτα</span>
<span style="font-size: 75%; color:grey;border: solid; border-width:1px; border-padding:4px; border-radius: 5px; display: block; padding: 3px;">Revuelta</span></span>
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;"></span></span></div><hr/ style="display: block; margin-top: 0.5em;  margin-bottom: 0.5em;  margin-left: auto;  margin-right: auto;  border-style: inset; border-width: 1px;">
<div style="margin-top:1px; font-family: Times; font-size:26px; line-height: 20px;">
<span style="font-size: 100% ; display: inline-block; text-align:center; padding-bottom: 15px;font-family: Times; margin-right: 5px;">
<span style="padding-bottom: 2px; ; display: block; padding-bottom: 10px;border-width: 3px;"></span></span></div>

Thanks for your help-

[yhatt]

Marp ecosystem is secure first so rendering the most of HTML tags is disabled by default. You can enable rendering of raw HTML tags from options.

Marp CLI

Add --html option.

marp --html your-slide.md

Marp for VS Code

Open VS Code settings, and turn on "Markdown > Marp: Enable HTML" (markdown.marp.enableHtml).

[lucastho]

Is there similar for marp-core or marpit?

[yhatt]

In Marp Core, you can set through the html constructor option. Check out Marp Core documentation.

import { Marp } from '@marp-team/marp-core'

const marp = new Marp({
  html: true
});

Marpit framework is delegating to markdown-it instance whether enabled HTML. By default, markdown-it instance will be initialized as CommonMark compliant mode, and enabled HTML by default.

import { Marpit } from '@marp-team/marpit'

// Marpit instance enables HTML by default
const marpit = new Marpit();

To set the markdown-it constructor option in Marpit constructor explicitly, pass the option object to markdown field of Marpit constructor. Refer to the API documentation.

import { Marpit } from '@marp-team/marpit'

const marpit = new Marpit({
  // Set the markdown-it constructor options explicitly
  markdown: {
    html: true,
  },
});

[pajaro1966]

Thank you so much! It works like a charm! Sorry for asking this. It's my first hour using Marp and, although I could do. almost everything (it's easy for beginners), I was clueless about the insertion of html.
Another question, how could I apply a css general style to all my html examples within a singles presentation? Is it possible to put css code in a Marp file and make it operate over certain html chunks?
Thanks in advance for your help. I really appreciate.
Antonio

[yhatt]

https://marpit.marp.app/theme-css?id=tweak-style-through-markdown would be helpful.

⚠️ Please avoid to ask multiple questions in a single thread. Each Q&A threads should have a single theme (the marked answer is correspond to the thread one-to-one).

If there is another question in a sub thread (comment), users who met the same trouble would be difficult to discover the answered Q&A.

• More than one question per post - Meta Stack Overflow
• How To Ask Good Questions On Technical And Scientific Forums
• How to write a quality question on Microsoft Q&A | Microsoft Docs