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: