> [!NOTE]
> This project is part of the ZikoJS ecosystem.

MDZjs

A Markdown preprocessor for 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 :

jsx

---

 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



- 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!

![Star](https://github.com/zakarialaoui10/mdzjs)

License

This projet is licensed under the terms of MIT License

Install

bash
npm i mdzjs

Config

js
import {defineConfig} from "vite"
import MDZ from "mdzjs/vite"
export default defineConfig({
plugins : [
MDZ()
]
})

Usage

Article.mdz :

jsx
---
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

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

- Interleaving : You can use inline markdown elements inside HTML or Zikojs Components

html

Hello {name}