Nouveau Papier Mâché

    gridsome-remark-embed-svg
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Gridsome Remark Embed Svg

    The purpose of this plugin is to embed the code of an svg in the rendered markdown.

    Installation

    Careful!: This plugin depends on the @gridsome/transformer-remark plugin.

    npm install gridsome-remark-embed-svg
    yarn add gridsome-remark-embed-svg

    Basic configuration.

    The plugin must be placed before the @gridsome/remark-prismjs plugin in the gridsome.config.js configuration to work properly.

    This is because the primjs will transpose the markdown code to html, and not placing the plugin in the correct sequence might loose the required plugin markups.

    Example:

    transformers: {
      remark: {
       ...
        plugins: [
            'gridsome-remark-embed-svg',
            ....
            '@gridsome/remark-prismjs',
          ....
        ]
      }
    }

    Basic operation:

    Using this example structure the code added in our markdown would be:

    `svg: ./images/vue-jquery.svg`
    

    Advanced. Usage. Configuration. Customization.

    The plugin allows to configure 2 parameters.

    Plugin configuration in Gridsome:

    When we pass parameters to a plugin in gridsome the way to write it in the gridsome.config.js changes slightly:

    transformers: {
      remark: {
       ...
        plugins: [
            [
                'gridsome-remark-embed-svg',
                {
                    parameter: value
                }
             ],
            ....
            '@gridsome/remark-prismjs',
          ....
        ]
      }
    }

    Configurable parameters:

    • embedKey: string // String must be a word without spaces. By default the value is 'svg' but it can be changed by any other.

    Example:

    transformers: {
     remark: {
      ...
       plugins: [
           [
               'gridsome-remark-embed-svg',
               {
                   embedKey: 'MyEmbed'
               }
            ],
           ....
           '@gridsome/remark-prismjs',
         ....
       ]
     }
    }

    This setting would change the code previously shown in the following way;

    `MyEmbed: ./images/vue-jquery.svg`
    
    • subdirectory: string // String is the default path to search for svg.

    Example:

    transformers: {
     remark: {
      ...
       plugins: [
           [
               'gridsome-remark-embed-svg',
               {
                   subdirectory: 'images'
               }
            ],
           ....
           '@gridsome/remark-prismjs',
         ....
       ]
     }
    }

    This setting would change the code previously shown in the following way;

    `svg: vue-jquery.svg`
    

    In short, the following configuration:

    transformers: {
      remark: {
       ...
        plugins: [
            'gridsome-remark-embed-svg',
            ....
            '@gridsome/remark-prismjs',
          ....
        ]
      }
    }

    is equal to:

    transformers: {
      remark: {
       ...
        plugins: [
            [
                'gridsome-remark-embed-svg',
             {
                 embedKey: 'svg',
                 subdirectory: ''
             }
            ],
            ....
            '@gridsome/remark-prismjs',
          ....
        ]
      }
    }

    Collaboration.

    Problems, comments, improvements, adaptations, etc. is open through the issues. PR will be welcome with appropriate commentary and/or documentation.

    Install

    npm i gridsome-remark-embed-svg

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    21.4 kB

    Total Files

    23

    Last publish

    Collaborators

    • infogon