https://github.com/zakarialaoui10/mdzjs
Markdown for Zikojs
https://github.com/zakarialaoui10/mdzjs
markdown mdx preprocessor remark zikojs
Last synced: about 2 months ago
JSON representation
Markdown for Zikojs
- Host: GitHub
- URL: https://github.com/zakarialaoui10/mdzjs
- Owner: zakarialaoui10
- License: mit
- Created: 2024-10-13T09:09:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-02-26T19:46:11.000Z (3 months ago)
- Last Synced: 2025-03-23T22:26:32.083Z (2 months ago)
- Topics: markdown, mdx, preprocessor, remark, zikojs
- Language: JavaScript
- Homepage:
- Size: 258 KB
- Stars: 27
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!NOTE]
> This project is part of the [ZikoJS](https://github.com/zakarialaoui10/ziko.js) ecosystem.
# MDZjs
A Markdown preprocessor for Zikojs. Markdown in Zikojs.
It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
## Install
```bash
npm i mdzjs
```
## Config
```js
import {defineConfig} from "vite"
import MDZ from "mdzjs/vite"
export default defineConfig({
plugins : [
MDZ()
]
})
```
## Usage
*Article.mdz :*
```js
---
title : MDZ
name : world
__props__ :
background : tomato
data : []
---
import data from "./data.js";
import InteractiveComponent from "./InteractiveComponent.js";
# Hello {name}
```
```js
// main.js
import Article,{title} from "./Article.mdz"
```
## Features
- **Simple Integration :** Write Markdown as usual, and inject Zikojs elements wherever needed.
- **Extensible :** Create custom interactive components using Zikojs and use them in any Markdown file.
- **Reusable :** MDZ exports a default functional component, allowing you to call it multiple times with different data, enabling dynamic and versatile use.
- **Frontmatter Support :** Use `YAML` syntax in to include metadata like titles, descriptions, or configurations in your Markdown files, and define props to pass data dynamically to Zikojs components.
- **Markdown :** Use standard Markdown syntax for writing content.
- **JSX Syntax :** Write components in JSX within Markdown, enabling easy integration of Zikojs elements with JavaScript and HTML..
- **Props :** Pass data to components through props, enabling dynamic rendering and customization of content within your Markdown files.
- **ESM :** Supports ECMAScript Modules (ESM), allowing you to import and export modules
- **Expressions :** MDZjs lets you use JS expressions inside curly braces, like Hello {name}.
These expressions can be full JS programs, as long as they evaluate to something renderable. For example, you can use an IIFE like this:
```js
Hello {(()=>{
const names = ["world", "everyone"];
const {length} = names
return names[Math.floor(Math.random()*length)]
})()}
```
- **Internal scripts :** Include JS logic that runs alongside MDZjs components but isn't rendered in the output.
They can initialize variables or perform side effects...
```html
console.log("Hello from MDZjs")
let addons = [
"ziko-gl",
"ziko-lottie",
"ziko-chart"
]
// The addons variable can be accessed and used in MDZjs expressions
```
- **Interleaving :** You can use inline markdown elements inside HTML or Zikojs Components
```html
***Hello {name}***
```
# ⭐️ Show your support
If you appreciate the project, kindly demonstrate your support by giving it a star!
[](https://github.com/zakarialaoui10/mdzjs)
# License
This projet is licensed under the terms of MIT License
