Are you looking for a way to add syntax highlighting in your virtual DOM frameworks without the hassle of serialized HTML? Look no further! Lowlight, based on highlight.js, allows for an elegant solution to syntax highlighting across various programming languages while providing outputs in the form of abstract syntax trees (ASTs).

What is Lowlight?

Lowlight is a package that utilizes highlight.js to perform syntax highlighting. It supports over 190 programming languages and is especially useful in scenarios where traditional HTML rendering might not work effectively.

When Should You Use Lowlight?

Lowlight is your go-to solution when:

• You need to show code in a Command Line Interface (CLI) using ANSI sequences.
• You’re working with virtual DOM frameworks like React or Preact, where efficient diffing is crucial.
• You are dealing with ASTs (like rehype).
• Serialized HTML approaches might fail or be inefficient.

Installation

Lowlight is ESM only and requires Node.js version 16 or higher. Here’s how to install it:

In Node.js:

npm install lowlight

In Deno:

import all, common, createLowlight from https://esm.sh/lowlight@3

In Browsers:

<script type="module">
 import all, common, createLowlight from https://esm.sh/lowlight@3?bundle
</script>

Using Lowlight

Once you have Lowlight installed, here’s how you can use it in your code:

import common, createLowlight from 'lowlight'

const lowlight = createLowlight(common)
const tree = lowlight.highlight('js', 'use strict;')
console.dir(tree, { depth: undefined })

This will yield the following output, which reflects the structure of the highlighted code:

{
  type: 'root',
  children: [
    { type: 'element', tagName: 'span', properties: { className: ['hljs-meta'] }, children: [{ type: 'text', value: 'use strict' }] },
    { type: 'text', value: ';' }
  ],
  data: { language: 'js', relevance: 10 }
}

Understanding the Code: An Analogy

Think of Lowlight as a chef in a restaurant that specializes in multiple cuisines (the programming languages). When a customer (the developer) orders a specific dish (code snippet), the chef doesn’t just prepare it directly. Instead, he first checks the ingredients (the language used) and then cooks it using the right techniques (syntax highlighting). In this analogy, Lowlight is the chef, ensuring that each dish served is prepared using the correct methods suited to that particular cuisine while providing not just the meal (string output) but also a detailed menu (AST) of its components.

Troubleshooting Ideas

If you encounter issues while setting up or using Lowlight, consider these troubleshooting tips:

• Ensure you are using a supported version of Node.js (16+).
• Check for correct import paths and methods.
• If the syntax highlighting doesn’t appear correct, confirm that you’ve registered the appropriate languages.
• Consult the API documentation for each function you are using to ensure proper parameter usage and expectations.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Final Thoughts

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Conclusion

Lowlight provides an efficient and flexible approach to syntax highlighting, allowing developers to integrate it seamlessly into their projects without the limitations posed by traditional HTML rendering. Start experimenting with Lowlight today to enhance your code presentations!