lram

install

npm i lram

css

import 'katex/dist/katex.min.css'
import 'highlight.js/styles/base16/railscasts.css'
import 'bootstrap/dist/css/bootstrap.min.css'

react + func + ts

import React, {useEffect, useState} from 'react'
import {lram} from 'lram'
import 'katex/dist/katex.min.css'
import 'highlight.js/styles/base16/railscasts.css'
import 'bootstrap/dist/css/bootstrap.min.css'

type Props = { data: string };

export const Lram = (props: Props) => {
    const [html, setHtml] = useState('')

    useEffect(() => {
        render().then()
    })

    async function render() {
        setHtml(lram.render(props.data))
    }

    return (
        <div className="lram">
            <div dangerouslySetInnerHTML={{__html: html}}/>
        </div>
    )
}

use Lram

let data = `
line
# h1
## h2


- saflkdsaf
- jsdljfas
- sdjflsaf

1. aaa
asjdflaksdjf
asjdflkdasf
asdjfkaf
1. bb
1. cc

01. aaa
01. bb
01. cc

al. aaa
al. bb
al. cc

cn. aaa
cn. bb
cn. cc

i. aaa
i. bb
i. cc

I. aaa
I. bb
I. cc

a. aaa
a. bb
a. cc

A. aaa
A. bb
A. cc



|  aa | bb | cc |
|-|-:|:-|
| 11 | 222 | 333 |
| xxx | sss | www |


@api.get /hello/:id
@api.post /hello/list/:id/:type

@api.body
{
    "name": "lram",
    "age": 18
}

@api.form
{
    "file": bin,
    "age": 18
}

@api.header
{
    token: "xxx"
    uid: "xxx"
}


#center


```
public void hello () {
 string str = "hello world !";
}
```

$$
f(x)=\int_{-\infty}^\infty\widehat f\xi\,e^{2\pi i\xi x}\,d\xi
$$


@img
https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202008%2F06%2F20200806001606_wwqyy.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637549239&t=a2569b417858e7c4c1cf9e3895dcf9bf


// This is a comment and is not displayed

`


export const App = () => {

    return (
        <Lram data={data}/>
    )
}