Is your feature request related to a problem? Please describe.
Currently, the syntax is limited in a way that css class can only be assigned to a chunk of text already delimited, e.g., by <strong>, <em> tags. As in the example below, it's currently impossible to apply a css class to a deliberate <span> of text—it has to be delimited by other markup.
I'm a **bold text `class: big`** and _`.small` me an italic one_
Describe the solution you'd like
Use the pipe character ("|") as a delimiter to separate metadata (including css classes information) from the text in the code blocks.
E.g.
For inline chunk of text:
The following code
I want this text to be in `class: my-class another-class|a span with css classes` my-class and another-class
or its shorthand
I want this text to be in `.my-class another-class|a span with a css classes` my-class and another-class
should be rendered as
<p>I want this text to be in <span class="my-class another-class">a span with css classes</span> my-class and another-class</p>
For blocks of text:
Use a yaml metadata to describe the rendering instructions for the block.
The following markup
```
class: my-class another-class
---
I want this text to be in a div with a css classes my-class and another-class`
```
should be rendered as
<div class="my-class another-class">
<p>I want this text to be in a div with a css classes my-class and another-class</p>
</div>
or
```
class: my-class another-class
el: article
---
I want this text to be in a article html element with a css classes my-class and another-class`
```
should be rendered as
<article class="my-class another-class">
<p>I want this text to be in a div with a css classes my-class and another-class</p>
</article>
Additional context
Currently, the text is rendered using the <code> html tag.
A suggestion is to introduce inline yaml-like or css-like metadata in the code-block separated from the text with a pipe? E.g.:
This is a usual chunk of text `class: my-class another-class; el: kbd|Some text that I want to be rendered in a kbd html tag` and have custom classes assigned.
rendered like the following:
<p>This is a usual chunk of text <kbd class="my-class another-class">Some text that I want to be rendered in a kbd html tag</kbd> and have custom classes assigned.</p>
Is your feature request related to a problem? Please describe.
Currently, the syntax is limited in a way that css class can only be assigned to a chunk of text already delimited, e.g., by <strong>, <em> tags. As in the example below, it's currently impossible to apply a css class to a deliberate <span> of text—it has to be delimited by other markup.
Describe the solution you'd like
Use the pipe character ("|") as a delimiter to separate metadata (including css classes information) from the text in the code blocks.
E.g.
For inline chunk of text:
The following code
or its shorthand
should be rendered as
For blocks of text:
Use a yaml metadata to describe the rendering instructions for the block.
The following markup
should be rendered as
or
should be rendered as
Additional context
Currently, the
textis rendered using the <code> html tag.A suggestion is to introduce inline yaml-like or css-like metadata in the code-block separated from the text with a pipe? E.g.:
rendered like the following: