Move all custom syntax to directives

[SilasBerger]

• https://github.com/remarkjs/remark-directive?tab=readme-ov-file#use
• https://github.com/lebalz/ofi-blog/pull/27/commits
• https://github.com/lebalz/ofi-blog/pull/27/commits/b3fdffb85d183dafc22d9a68d226cb119a516dd2
• https://github.com/lebalz/ofi-blog/pull/27/commits/30b89540f35a14498447f6967fb863128da57c10
• https://github.com/lebalz/ofi-blog/pull/27/commits/a56ee21521923090e57b2b70f0c792714e057337
• https://github.com/lebalz/ofi-blog/pull/27/commits/380712191b273995ea04d09ba2964d24c513c344
• https://github.com/lebalz/ofi-blog/pull/27/commits/b0ec35b1227321840ca7b150d5153bca95e2a6b0

[SilasBerger]

Define mdi-specific classes in styles.scss such as:

.mdi {
  .mdi-icon {
      &.green {
          color: var(--ifm-color-success);
      }
  }
}

to allow for the use of classes in MDI directives such as

:mdi[check-circle]{.green}

[SilasBerger]

A thought on compatibility with https://github.com/lebalz/ofi-blog, concerning (at least) text directives:

• The semantics of each directive should be defined through plugin config.
• Custom classes such as for MDI color (see previous comment) are defined by each project and independent of this plugin.

Therefore, if this plugin should eventually become a shared asset, the adoption path should only require the creation of a plugin config. MDX code or CSS should remain fully compatible.