top of page

Documentation

Introduction
Snippets is a Wix Studio plugin that integrates the PrismJS library, enabling you to transform text elements into syntax-highlighted code snippets without writing any code. By utilizing custom CSS classes, this plugin allows users to style and control the behavior of their code snippets. This guide explains how to use these classes effectively.

Quick Start

  1. Install the plugin and add the widget to your canvas. Place it anywhere that won't interfere with your design (you can make it any size and transparent).

  2. Turn on dev mode and add the class "snippet" to the desired text element containing your code.

  3. Add additional classes to customize the appearance and behavior of your snippet.

  4. Publish your site and check it on the live site.
     

Available Classes
The plugin provides several classes for customizing your code snippets:

  • "snippet": The base class for all snippets

  • "lang-*": Specify the programming language (e.g., language-javascript, language-python)

  • "theme-*": Choose a color theme (see list below)

  • "line-numbers": Add line numbers to your snippet

  • "r-*": Set border radius (e.g., r-10 for 10px border radius)

  • "scale": Enable font scaling based on viewport width
     

How to Use the Classes

  1. snippet

    • Usage: Add this class to any text element containing code you want to highlight.

    • Behavior: This text element will be transformed into a syntax-highlighted code snippet.

  2. language-*

    • Usage: Add this class to specify the programming language of your snippet.

    • Examples: language-javascript, language-python, language-html, language-css

    • Behavior: The snippet will be highlighted according to the specified language syntax.

  3. theme-*

    • Usage: Add this class to choose a color theme for your snippet.

    • Available themes (corresponding to PrismJS names):

      • theme-default

      • theme-dark

      • theme-funky

      • theme-okaidia

      • theme-tomorrow-night

      • theme-twilight

      • theme-coy

      • theme-solarized-light

    • Behavior: The snippet will use the specified color theme for syntax highlighting.

  4. line-numbers

    • Usage: Add this class to display line numbers in your snippet.

    • Behavior: Line numbers will appear on the left side of the snippet.

  5. r-*

    • Usage: Add this class to set a custom border radius for your snippet.

    • Examples: r-10 for 10px radius, r-20 for 20px radius, etc.

    • Behavior: The snippet will have rounded corners with the specified radius.

  6. scale

    • Usage: Add this class to enable font scaling based on viewport width.

    • Behavior: The font size of the snippet will adjust relative to the viewport width.
       

Examples
1. For Javascript snippet, include line numbers, scale the font the following classes should be added:
"snippet lang-javascript scale"
*if no theme is defined, default theme will be applied.

2. For CSS snippet in dark theme with 20px border radius, the following classes should be added:
"snippet lang-css theme-dark r-20"

Best Practices​

  • Test your snippets on various devices and screen sizes. Use scale class for making the snippet font scale proportionally. 

  • Width Management:

    • To maintain an exact width, set the text element width in specific units (e.g., pixels, percentages).

    • To preserve the line breaks of your code, set the width to "hug" or "max-content". Keep in mind that in this case, the overall width of the snippet will probably be different from your preview because of font changes.

  • If your snippet is shown above the fold, add an entrance interaction to prevent the conversion from being seen. Even a value of 0 duration will have the desired effect.


Troubleshooting

  • If snippets aren't highlighting correctly, ensure you've added the correct language-* class.

  • If the theme isn't applying, check that you've used a valid theme-* class.

  • If line numbers aren't appearing, make sure you've included the line-numbers class.

  • If the font size isn't scaling, verify that you've added the scale class.

  • Ensure that the plugin is properly installed and that the containing widget is present on your page.

  • If the snippet width is larger than expected, check the width setting of your original text element and consider setting it to a specific unit instead of "max content".

bottom of page