Customize Menu | Styling LESS/SCSS code formats

Question

I'm trying to make a plugin that will insert an option into the Customize menu for the theme that will allow you to edit SCSS and LESS. I've gotten as far as creating the fields and having them work, but I cannot get color formatting to work on the editor box.

After looking at the WP source code, I came across this: https://github.com/WordPress/WordPress/blob/master/wp-includes/customize/class-wp-customize-code-editor-control.php

And so, I built up a script to format everything based on what the source code read. This still does not style the box.

Here is my code:

$wp_customize->add_control(
    new WP_Customize_Code_Editor_Control(
      $wp_customize,
      "sassify_scss",
      array(
        "label"      => "Custom SCSS",
        "section"    => 'sassify-scss',
        "settings"   => "sassify_scss",
        "editor_settings" => array(
                         'type'       => "scss",
                         'codemirror' => array(
                           'indentUnit' => 2,
                           'tabSize'    => 2,
                         )
             )


      )
    )
);

Answer 1

I was able to get SASS syntax highlighting in a code textarea in Customizer with the following:

add_action( 'customize_register', function( WP_Customize_Manager $wp_customize ) {
    $wp_customize->add_setting( 'favorite_html' );
    $control = new WP_Customize_Code_Editor_Control( $wp_customize, 'favorite_html', array(
            'label' => 'SASS',
            'code_type' => 'sass',
            'settings' => 'favorite_html',
            'section' => 'title_tagline',
    ) );
    $wp_customize->add_control( $control );
} );

via @westonruter in track.

The editor is powered by CodeMirror, since 4.9, so if you're looking for different code types look their.