Nonsense Placement Mandatory

    markdown-it-vuepress-code-snippet-enhanced

    1.0.1 • Public • Published

    Markdown-it Vuepress Code Snippet Enhanced

    Why use this plugin?

    • Specify your own language 💥
    • Transclude any part of a file 💥
    • Line highlighting extended from Vuepress 💚

    Install

    npm i -D markdown-it-vuepress-code-snippet-enhanced


    Setup

    In Vuepress config.js add the following:

    markdown: {
        config: md => {
            md.use(require('markdown-it-vuepress-code-snippet-enhanced'))
        }
    }

    You can now import code snippets into your markdown files with the following syntax:

    @[code](@/docs/code.js)
    @[code lang=ruby transclude={1-1}](@/docs/code.rb)
    @[code highlight={1-6} transcludeTag=style](@/docs/code.vue)
    @[code highlight={4,9,11-16} transcludeWith=:::](@/docs/code.vue)

    Options

    Language

    You can specify any language for syntax highlighting as follows:

    @[code lang=ruby](@/docs/code.rb)
    @[code lang=csharp](@/docs/code.cs)

    Vuepress uses prismjs, so for proper syntax highlighting check prism.js docs.


    Transclusion

    You can transclude a single or multiple parts of a file using transclude, transcludeWith, or transcludeTag.

    transcludeWith

    For transcluding one or more parts of a file using comment lines and specify a unique pattern.

    @[code lang=ruby transcludeWith=|_|_|](@/docs/code.rb)
    @[code transcludeWith=:::](@/docs/code.js)
    @[code transcludeWith=++++](@/docs/code.h)
    Example
    require 'lib'  
    require 'other'  
     
    # |_|_|
    def hello
      puts 'hello'
      puts 'vue'
    end
    # |_|_|

    transcludeTag

    Useful when working Vue single file components.

    @[code transcludeTag=template](@/docs/code.vue)
    @[code transcludeTag=script](@/docs/code.vue)
    @[code transcludeTag=style](@/docs/code.vue)

    transclude

    Use a range indicating the start and end lines. This option is inclusive.

    @[code transclude={5-13}](@/docs/code.js)

    Sample

    Input Markdown

    @[code highlight={1-6} transcludeTag=style](@/docs/code.vue)
    

    Source File

    <template>
      <div class="component"></div>
    </template>
     
    <script>
    export default {
      mounted () {
        alert('yay!')
      }
    }
    </script> 
     
    <style lang="scss" scoped>
    .component {
      display: flex;
    }
    </style> 

    Rendered Output

    <style lang="scss" scoped>
    .component {
      display: flex;
    }
    </style>

    Install

    npm i markdown-it-vuepress-code-snippet-enhanced

    DownloadsWeekly Downloads

    86

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    8.22 kB

    Total Files

    8

    Last publish

    Collaborators

    • fabioanselmo