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

    nuxt-content-highlight

    0.1.11 • Public • Published

    nuxt-content-highlight

    Text highlighting wrapper for @nuxt/content.

    Animated screenshot of a demo

    Installation

    $ yarn add -D nuxt-content-highlight

    or

    $ npm install -D nuxt-content-highlight

    Demo

    Clone this repository, then:

    $ yarn dev

    or

    $ npm run dev

    and navigate to http://localhost:3000.

    Example usage

    Add the following lines to nuxt.config.js, if not already present:

        modules: [
            '@nuxt/content',
            'nuxt-content-highlight',
        ],
    
        build: {
            transpile: [
                'nuxt-content-highlight',
                '@nuxt',
            ],
        },

    Inside of the (page's) <script>:

    {
        data()
        {
            return {
                document: {},
            };
        },
    
        async asyncData({ $content })
        {
            const document = await $content('example').fetch();
            return {
                document,
            };
        },
    }

    Part of the template:

    <nuxt-content-highlight :document="document" highlight-text="some text">
    </nuxt-content-highlight>

    Contents of content/example.md file:

    # Example document
    
    This is a document containing some text.  But not just any text.  Some text is
    different.

    Output:

    <h1>Example document</h1>
    <p>This is a document containing <span style="highlight">some text</span>. But
    not just any text. <span style="highlight">Some text</span> is different.</p>

    Props

    caseSensitive

    Type: Boolean
    Default: false

    Should the search for the text to be highlighted be case-sensitive or not.

    document

    Type: Object
    Required: true

    @nuxt/content object obtained by $content(...).fetch() and passed on to <nuxt-content> component

    highlightText

    Type: String
    Default: ""

    Text to be highlighted

    highlightClassName

    Type: String
    Default: "highlight"

    CSS class to be added to the highlight <span>

    CSS

    To style the highlights, you should customize the CSS of the [highlightClassName] class (default: highlight). Example:

    .highlight
    {
        background-color: #ff9
    }

    Install

    npm i nuxt-content-highlight

    DownloadsWeekly Downloads

    33

    Version

    0.1.11

    License

    MIT

    Unpacked Size

    587 kB

    Total Files

    53

    Last publish

    Collaborators

    • avatar