markdown-it-fontawesome

This Project is under contstructing. Please not post issue for this project.

Markdown It plugin, by which you'll be able to use Fontawsome icon on your Markdown. This project design for Marp. So you can use Fontawesome icon on your presentation !! Please enjoy.

Feature

Simple icon

| description | Markdown | HTML | | ----------- | ---------------------- | ------------------------------------------------------------ | | Simple icon | :fa fa-user: | <p><i class="fa fa-user"></i></p> | | Styled icon | [:fa fa-user:]{.red} | <p><span class="red"><i class="fa fa-user"></i></span></p> |

Stacking icons

If you wrote in markdown like bellow,

[[:fa-solid fa-camera fa-stack-1x:]{.blue} [:fa-solid fa-ban fa-stack-2x:]{.red}]

goes to in html like this.

<p>
    <span class="fa-stack">
        <span class="blue">
            <i class="fa-solid fa-camera fa-stack-1x"></i>
        </span>
        <span class="red">
            <i class="fa-solid fa-ban fa-stack-2x"></i>
        </span>
    </span>
</p>

Icons in a list

If you wrote in markdown like bellow,

* :fa-solid fa-cube: first item
* :fa-solid fa-cube: second item
* :fa-solid fa-cube: third item

goes to in html like this.

<ul class="fa-ul">
    <li>
        <span class="fa-li">
            <i class="fa-solid fa-cube"></i> first item
        </span>
    </li>
    <li>
        <span class="fa-li">
            <i class="fa-solid fa-cube"></i> second item
        </span>
    </li>
    <li>
        <span class="fa-li">
            <i class="fa-solid fa-cube"></i> third item
        </span>
    </li>
</ul>

How To Use

Here is the how to use markdow-it-fontawesome. This section introduce how to create Marp slides-deck project, and introduce how to create Marp slides-deck server.

You can find deltail info in here, and you can learn about marp plugin eco-system, here.

[1st step] Create Slides-deck project

First, for create slides-deck, you have to prepair to Marp Project directory. So First, Create slides-deck project, and init npm package.

mkdir myslides
cd myslides

npm init -y

Secondary, Build Marp Environment. Install @marp-team/marp-cli.

npm install -D @marp-team/marp-cli

Off-course you can install as global package (like npm install -g @marp-team/marp-cli), or run at-once (like npx).

[2nd step] Download this project and install

cd myslides
npm install -D @kazumatu981/markdown-it-fontawesome

[3rd step] Create marp.config.js.

Here is the configuration file for Marp.

module.exports = {
    inputDir: './slides',
    engine: ({ marp }) => marp.use(require('@kazumatu981/markdown-it-fontawesome'))
}

[4th step] Create your slides

On slies directory. you create slides-deck. like this.

---
marp: true
---
<style>
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
</style>

# :fa fa-user: can you use Fontawesome ?

Please import fontawesome's open source css from CDN repository with <style>.

[5th step] run server

Run marp server.

marp -s -c marp.config.js