How do I enable syntax highlighting?

  • Resolved noisymemories

    (@noisymemories)


    5 years, 6 months ago

    Hello,
    Sorry for the silly question, I’m trying to enable syntax highlighting for a textarea_code field and I can’t find any resource to do so. My component is configured in js mode but there’s no formatting nor linting whatsoever.

    Actually I’m not even sure CMB2 currently supports syntax highlighting despite using the native wordpress codemirror component – Do I really need to use a third party plugin like https://github.com/timothyjensen/cmb2-syntax-highlighting ?

    I’m setting my component like this:

    $cmbSceneFields->add_field(
        array(
            'name' => __('Script', 'visual-js'),
            'desc' => __('Add your scripts directly here. Only ES5 Javascript is supported at the moment.', 'visual-js'),
            'id' => '_js_editor',
            'type' => 'textarea_code',
            'default' => "\nfunction foo() {}",
            'sanitization_cb' => 'checkScriptValueContent',
            'attributes' => array(
                'data-codeeditor' => json_encode( array(
                    'codemirror' => array(
                        'mode' => 'js'
                    ),
                )),
            ),
        )
    );

    Thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Yes, I do believe 3rd party extensions are needed for syntax highlighting in CMB2 fields. It certainly wouldn’t surprise me at least.

    Are you getting any javascript errors in your dev console for this attempt above? Have you tried that extension yet from Timothy?

    Plugin Author Justin Sternberg

    (@jtsternberg)

    Yes, I do believe 3rd party extensions are needed for syntax highlighting in CMB2 fields. It certainly wouldn’t surprise me at least.

    That’s not true. codemirror syntax highlighting was introduced in 2.4.0: https://github.com/CMB2/CMB2/releases/tag/v2.4.0
    You should not need a 3rd-party plugin, unless you don’t like the codemirror implementation.

    The reason you are not seeing formatting is because the mode you are looking for is javascript, not js.

    The modes you can use are listed here, though you have to hunt a bit to find the mode to use in the config: https://codemirror.net/mode/index.html

    Plugin Contributor Michael Beckwith

    (@tw2113)

    The BenchPresser

    Ah, my bad. Sorry everyone.

    Thread Starter noisymemories

    (@noisymemories)

    @jtsternberg Yep, that was it! I can confirm it’s working using “javascript” as value for “mode”, same for other codemirror options. Didn’t realize they were directly mapped for the ‘data-codeeditor’ attribute. The link to the wordpress documentation available in the docs makes a lot more sense now. Thanks!

    @tw2113 no worries and thanks for your help anyway! Didn’t really test the library from timothy, I tried downloading and activating his plugin but even by adding the relevant filters the textarea was still unformatted.

    • This reply was modified 5 years, 6 months ago by noisymemories.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How do I enable syntax highlighting?’ is closed to new replies.