On this page

Ace#

Download this notebook from GitHub (right-click to download).

import panel as pn
import param
pn.extension('ace')

The Ace widget allows embedding a code editor based on Ace. Only a small subset of Ace functionality is currently enabled:

  • syntax highlighting for several languages

  • themes

  • basic completion support via ctrl+space (using only static analysis of the code)

  • annotations

  • readonly mode

Parameters:#

For layout and styling related parameters see the customization user guide.

  • annotations (list): list of annotations. An annotation is a dict with the following keys:

    • 'row': row in the editor of the annotation

    • 'column': column of the annotation

    • 'text': text displayed when hovering over the annotation

    • 'type': type of annotation and the icon displayed {warning | error}

  • filename (str): If filename is provided the file extension will be used to determine the language

  • language (str): A string declaring which language to use for code syntax highlighting (default: ‘text’)

  • print_margin (boolean): Whether to show a print margin in the editor

  • theme (str): theme of the editor (default: ‘chrome’)

  • readonly (boolean): Whether the editor should be opened in read-only mode

  • value (str): A string with (initial) code to set in the editor

To construct an Ace widget we must define it explicitly using pn.widgets.Ace. We can add some text as initial code. Code inserted in the editor is automatically reflected in the value.

py_code = """import sys"""
editor = pn.widgets.Ace(value=py_code, sizing_mode='stretch_both', language='python', height=300)
editor

we can add some code in it

editor.value += """
import Math

x = Math.cos(x)**2 + Math.cos(y)**2
"""

We can change language and theme of the editor

html_code = r"""<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
    </head>
    <body>
        <h1>Title1</h1>
        <h2>Title2</h2>
        <p>Paragraph</p>
    </body>
</html>
"""
editor.language = "html"
editor.theme = "monokai"
editor.value = html_code

We can add some annotations to the editor

editor.annotations= [dict(row=1, column=0, text='an error', type='error'),
                     dict(row=2, column=0, text='a warning', type='warning')]

If we want just to display editor content but not edit it we can set the readonly property to True

#editor.readonly = True

If instead of setting the language explicitly we want to set the filename and automatically detect the language based on the file extension we can do that too:

editor.filename = 'test.html'

Including the Ace editor in a parameterized class#

You can view the Ace widget as part of a param.Parameterized class:

class AceTest(param.Parameterized):
    editor = param.String('Hello World')
    
    def view(self):
        """ Map the string to appear as an Ace editor. """
        return pn.Param(
            self.param,
            widgets=dict(
                editor=dict(
                    type=pn.widgets.Ace,
                    language='python',
                )
            )
        )
    
ace = AceTest()
ace.view()

Controls#

The Ace widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:

widget = pn.widgets.Ace(name='Ace', value=py_code, sizing_mode='stretch_both', height=300)

pn.Row(widget.controls(jslink=True), widget)

Try changing the filename including a file extension and watch the language automatically update.

This web page was generated from a Jupyter notebook and not all interactivity will work on this website. Right click to download and run locally for full Python-backed interactivity.

Download this notebook from GitHub (right-click to download).