Modify syntax for inline spans of text

[voltel]

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>