https://github.com/dbartholomae/jsx-md

Generate markdown files with a React-like syntax.
https://github.com/dbartholomae/jsx-md

hacktoberfest jsx markdown react

Last synced: 25 days ago
JSON representation

Generate markdown files with a React-like syntax.

• Host: GitHub
• URL: https://github.com/dbartholomae/jsx-md
• Owner: dbartholomae
• Created: 2020-08-22T14:29:58.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2023-02-28T11:58:35.000Z (about 2 years ago)
• Last Synced: 2025-03-24T09:21:40.016Z (about 1 month ago)
• Topics: hacktoberfest, jsx, markdown, react
• Language: TypeScript
• Homepage: https://dbartholomae.github.io/jsx-md/
• Size: 579 KB
• Stars: 9
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# jsx-md

[![npm version](https://badge.fury.io/js/jsx-md.svg)](https://npmjs.org/package/jsx-md)

[![downloads](https://img.shields.io/npm/dw/jsx-md.svg)](https://npmjs.org/package/jsx-md)

[![open issues](https://img.shields.io/github/issues-raw/dbartholomae/jsx-md.svg)](https://github.com/dbartholomae/jsx-md/issues)

[![build status](https://github.com/dbartholomae/jsx-md/workflows/Build%20and%20deploy/badge.svg?branch=main)](https://github.com/dbartholomae/jsx-md/actions?query=workflow%3A"Build+and+deploy")

[![codecov](https://codecov.io/gh/dbartholomae/jsx-md/branch/main/graph/badge.svg)](https://codecov.io/gh/dbartholomae/jsx-md)

[![dependency status](https://david-dm.org/dbartholomae/jsx-md.svg?theme=shields.io)](https://david-dm.org/dbartholomae/jsx-md)

[![devDependency status](https://david-dm.org/dbartholomae/jsx-md/dev-status.svg)](https://david-dm.org/dbartholomae/jsx-md?type=dev)

Generate markdown files with a React\-like syntax.

## Usage

```tsx

// We need to tell the JSX transpiler that in this file,

// instead of React we use the custom createElement and Fragment

// functions from jsx-md

/* @jsx MD */

/* @jsxFrag Fragment */

import MD, { Component, Fragment, Heading, LineBreak, render, Text } from "jsx-md";

import { writeFileSync } from "fs";

import pkg from "./package.json";

const Readme: Component = () => (

  <>

    {pkg.name}

    {pkg.description}

    

  >

);

async function writeReadme() {

  writeFileSync("README.md", await render());

}

void writeReadme();

```

## Documentation

There's a [documentation](https://dbartholomae.github.io/jsx-md) of all elements you can use.