testdrivenio/vue-lexer

a Vue lexer for pygments

vue-lexer

A Vue lexer for Pygments (based on jsx-lexer)

Installation

$ pip install vue-lexer

Usage with Sphinx

To use within Sphinx, simply specify vue for your code-block:

.. code-block:: vue

    <template>
      <p>{{ greeting }} World!</p>
    </template>

    <script>
    module.exports = {
      data: function () {
        return {
          greeting: 'Hello'
        }
      }
    }
    </script>

    <style scoped>
    p {
      font-size: 2em;
      text-align: center;
    }
    </style>

Usage with mkdocs

First, you need to create the CSS for the highlighting:

$ pygmentize -S default -f html -a .codehilite > code/pygments.css

Then, add the following to your mkdocs.yml:

markdown_extensions:
  - codehilite
extra_css: [pygments.css]

Now, you can use vue in your code blocks:

```vue
<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function () {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>
```

Examples

Example 1:

Example 2:

Example 3:

vue-lexer's Issues

Error matching a v-for directive.

Hey there,

thank you for this lexer.

I am currently writing my thesis and was looking for a way to make the Latex code listings look nice. I use the minted package which uses pygmentize itself. But so far, the output does not yet satisfy my requirements.

Here is an example code snippet, where the lexer falsely marks =" and " in the second v-for loop as an error.

<template>
    <svg viewBox="-200, -200, 400, 400">
        <g id="nodes">
            <circle 
                v-for="node in graph.nodes"
                :key="node.id"
                :x="node.x"
                :y="node.y"
                :r="getNodeRadius(node)"
            >
        </g>
        <g id="links">
            <line
                v-for="link in graph.links"
                :key="link.id"
                :x1="link.source.x"
                :x2="link.target.x"
                :y1="link.source.y"
                :y2="link.target.y"
                :style="getLinkStyle(link)"
            />
        </g>
    </svg>
</template>

👍 GitHubs Lexer does a good job ;)

The wrong output line looks like this:

<span class="na">v</span><span class="nt">-for</span><span class="err">=&quot;</span><span class="na">link</span> <span class="na">in</span> <span class="na">graph.links</span><span class="err">&quot;</span>

I attached the full HTML output (as txt, Github doesnt support HTML 😩).
test.txt

Cheers,
Lukas