Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kazumatu981/markdown-it-fontawesome
https://github.com/kazumatu981/markdown-it-fontawesome
List: markdown-it-fontawesome
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/kazumatu981/markdown-it-fontawesome
- Owner: kazumatu981
- License: mit
- Created: 2023-03-29T22:51:41.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-02-25T03:50:47.000Z (11 months ago)
- Last Synced: 2024-10-22T04:59:08.693Z (3 months ago)
- Language: TypeScript
- Size: 122 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-marp - @kazumatu981/markdown-it-fontawesome - markdown-it plugin (mainly designed for Marp), to support [Font Awesome](https://fontawesome.com/) icons. (Plugins / Compatible markdown-it plugins)
README
# 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](https://fontawesome.com/) icon on your Markdown.
This project design for [Marp](https://marp.app/).
So you can use Fontawesome icon on your presentation !!
Please enjoy.
## Feature
### Simple icon
| description | Markdown | HTML |
| ----------- | ---------------------- | ------------------------------------------------------------ |
| Simple icon | `:fa fa-user:` | `
` |
| Styled icon | `[:fa fa-user:]{.red}` | `
` |
### Stacking icons
If you wrote in markdown like bellow,
```markdown
[[:fa-solid fa-camera fa-stack-1x:]{.blue} [:fa-solid fa-ban fa-stack-2x:]{.red}]
```
goes to in html like this.
```html
```
### Icons in a list
If you wrote in markdown like bellow,
```markdown
* :fa-solid fa-cube: first item
* :fa-solid fa-cube: second item
* :fa-solid fa-cube: third item
```
goes to in html like this.
```html
-
first item
-
second item
-
third item
```
## 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](https://marp.app/),
and you can learn about marp plugin eco-system, [here](https://marpit.marp.app/usage?id=extend-marpit-by-plugins).
### **[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.
```bash
mkdir myslides
cd myslides
npm init -y
```
Secondary, Build Marp Environment.
Install [@marp-team/marp-cli](https://github.com/marp-team/marp-cli).
```bash
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
```bash
cd myslides
npm install -D @kazumatu981/markdown-it-fontawesome
```
### **[3rd step]** Create `marp.config.js`.
Here is the configuration file for **Marp**.
```javascript
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
---
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';
# :fa fa-user: can you use Fontawesome ?
> Please import fontawesome's open source `css` from *CDN repository* with ``.
### **[5th step]** run server
Run marp server.
```bash
marp -s -c marp.config.js
```