# md-compile

> markdown compile

Latest version **1.1.0** (published 2018-04-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install md-compile
pnpm add md-compile
yarn add md-compile
bun add md-compile
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-04-10 |
| First published | 2017-11-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 43.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | manong |
| Maintainers | manong |
| Keywords | md, markdown |

## Links

- npm: https://www.npmjs.com/package/md-compile
- npm.io page: https://npm.io/package/md-compile

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-04-10
- 1.0.9 — 2018-04-10
- 1.0.8 — 2018-04-10
- 1.0.7 — 2018-01-03
- 1.0.6 — 2018-01-03
- 1.0.5 — 2018-01-03
- 1.0.4 — 2018-01-03
- 1.0.3 — 2018-01-03
- 1.0.2 — 2017-11-27
- 1.0.1 — 2017-11-27
- 1.0.0 — 2017-11-27

## README

# md

unpkg链接：
https://unpkg.com/md-compile/lib/main.js

```js
marked.setOptions({
   custom: {
           key: 'demo', // 记号键名
           mark: ':::', // 记号
           render: function (oldStr, newStr) { // oldStr 原始字符串 newStr 处理后的字符串
               return '<div>'+
               '<div class="code-example">' + oldStr + '</div>'+
               '<div class="code-content">' + newStr + '</div>'+
               '<div class="code-control">显示代码</div>'+
               '</div>'
           },
           validate:'...'
   },
   codeRender:function (oldStr, newStr) { // 同上custom.render,针对生成的code,可以做一层包装。
       // return
   },
   highlight: function(code,lang) { // 结合highlight
       return hljs.highlightAuto(code,[lang]).value;
   }
});
```
```js
// webpack

// main.js
import marked from "md-compile"
import highlight from "highlight.js"
import 'highlight.js/styles/color-brewer.css';
marked.setOptions({
    custom: {
        key: 'demo', // 记号键名
        mark: ':::', // 记号
        render: function (oldStr, newStr) {
            return '<div>'+
                '<div class="code-example">' + oldStr + '</div>'+
                '<div class="code-content">' + newStr + '</div>'+
                '<div class="code-control">显示代码</div>'+
                '</div>'
        }
    },
    highlight: function (code,lang) {
        return highlight.highlightAuto(code,[lang]).value;
    }
});
// import alerts from './docs/components/alerts.md'
// const app = document.getElementById('app');
// app.innerHTML = marked(comp)

// webpack.config.js
module: {
    rules: [
        {
           test: /\.md$/,
           use: [
               {
                   loader: "html-loader"
               }
           ]
        },
    ]
},
```

```css
/*代码显示风格 仅用于 color-brewer ----------------*/
.hljs,.highlight  {
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
    font-size: 12px;
    /*padding: 18px 24px;*/
    background-color: #f9fafc !important;
    /*border: 1px solid #eaeefb;*/
    /*border-radius: 4px;*/
    -webkit-font-smoothing: auto;
}
/*代码显示内容*/
.code-content{
    height: 0;
    overflow: hidden;
    transition: height .2s;
}
.code-content pre code {
    padding: 1rem
}
/*代码显示控制按钮*/
.code-control {
    border-top: 1px solid #eaeefb;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    background-color: #654343;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    color: #d3dce6;
    cursor: pointer;
    transition: .2s;
    position: relative;
    margin-bottom:1rem;
}
.code-control:hover {
    /* color: #20a0ff; */
    background-color: #9f6a6a;
}
```

```js
// code 展示隐藏 （注意先后顺序）
var elements = document.getElementsByClassName('code-control');
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        var sibling = this.previousElementSibling;
        var clientHeight = sibling.children[0].clientHeight;
        if (sibling.style.height === '' || sibling.style.height === '0px') {
            sibling.style.height = clientHeight + 'px';
        } else {
            sibling.style.height = '0px';
        }
    }
};
```

---
_Source: https://npm.io/package/md-compile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._