Nihilist Postmodern Mistake
    Have ideas to improve npm?Join in the discussion! »

    remark-css-selectors

    1.0.1 • Public • Published

    about

    This is extension plugin for remark markdown library whitch based on unified framework. It's allows you add id and css attributes to markdown language. Extension works with rehype by using hProperties.

    installation

    npm install remark-css-selectors

    examples

    {.big-head}# h3 Heading   
    {.heading}#### h4 Heading {.line}~~Strikethrough~~  
    ##### h5 Heading {.w-800 text-red}**This is bold text**  {.lite}_This is italic text_

    will output

    <h1 class="big-head">h3 Heading</h1>
    <h4 class="heading">h4 Heading  
        <del class="line">Strikethrough</del>  
    </h4>  
    <h5>h5 Heading <strong class="w-800 text-red">This is bold text</strong> <em class="lite">This is italic text</em></h5>
    {.h2}{#hJs}## New rules
      
    {#specilaLine}---
     
    {.line-through}***  
      
    {.quotes-title}## Blockquotes  
      
    {.block}> Blockquotes can also be nested...  
    >> ...by using additional greater-than signs right next to each other...  
    > > > ...or with spaces between arrows.
    <h2 class="h2" id="hJs">New rules</h2>
    <hr id="specilaLine">  
    <hr class="line-through">  
    <h2 class="quotes-title">Blockquotes</h2>  
    <blockquote class="block"><p>Blockquotes can also be nested...</p>  
     <blockquote><p>...by using additional greater-than signs right next to each other...</p>  
         <blockquote>
             <p>...or with spaces between arrows.</p>
         </blockquote>  
     </blockquote>
    </blockquote>
    Inline {.code}`code`  
      
    {.sample sample--red}```  
    Sample text here...  
    .```  
      
    Syntax highlighting  
      
    {#code}{.code-js}``` js  
    var foo = function (bar) {  
     return bar++;};  
      
    console.log(foo(5));  
    .```
    <p>Inline <code class="code">code</code></p>  
    <pre>
        <code class="sample sample--red">Sample text here... </code>
    </pre>  
    <p>Syntax highlighting</p>  
    <pre>
        <code class="code-js" id="code">
        var foo = function (bar) { return bar++; }; console.log(foo(5)); 
        </code>
    </pre>
    1. with custom blocks
    {.sm-col-6}[[block]]  
    |{.pargraph-class} {#img-id}![Minion](https://....)  
    |{.img-class}![Stormtroopocat](https://.... "The Stormtroopocat")  
      
    you need one space in front to assign id to image not to paragraph  
     {#image}![Alt text][id]
    <div class="custom-block custom-block sm-col-6">  
     <div class="custom-block-body">  
         <p class="pargraph-class">
             <img id="img-id" src="https://..." alt="Minion" >  
             <img class="img-class" src="https://..." >  
         </p> 
      </div>
     </div>
    <p> you need one space in front to assign id to image not to paragraph 
        <img id="image" src="https://..." >
    </p>

    usage

    import unified from 'unified'  
    import parse from 'remark-parse';  
    import selectors from 'ramark-css-selectors';
    //import remarkCustomBlocks from 'remark-custom-blocks'  
    import remark2rehype from "remark-rehype";  
    import doc from'rehype-document';  
    import format from'rehype-format';  
    import html from 'rehype-stringify';
     
     let document = unified()  
        .use(parse)  
        .use(selectors)  
    //  .use(remarkCustomBlocks, {  
    //      block: {  
    //          classes: 'custom-block'  
    //      },  
    //  })  
        .use(remark2rehype)
        .use(doc)  
        .use(format)  
        .use(html)  
        .processSync(md);
        
    console.log(document.contents)
    const processed = unified()
        .use(parse)
        .use(remarkAttr)
        .use(remark2rehype)
        .use(rehypeReact, {createElement: React.createElement})
        .processSync(md);
    // will return react elemt
    return processed.result;

    Install

    npm i remark-css-selectors

    DownloadsWeekly Downloads

    1

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    12.1 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar