Cacher is the code snippet organizer for pro developers

function InitializeSnippetModal() {

    $('.snippetDescription').val('');
    $('#editor').empty();
    require(['vs/editor/editor.main'], function () {
        editor = monaco.editor.create(document.getElementById('editor'), {
            value: [
                'Write code here'
            ].join('\n'),
            language: 'javascript',
            scrollbar: {
                // Subtle shadows to the left & top. Defaults to true.
                useShadows: false,

                // Render vertical arrows. Defaults to false.
                verticalHasArrows: true,
                // Render horizontal arrows. Defaults to false.
                horizontalHasArrows: true,

                // Render vertical scrollbar.
                // Accepted values: 'auto', 'visible', 'hidden'.
                // Defaults to 'auto'
                vertical: 'visible',
                // Render horizontal scrollbar.
                // Accepted values: 'auto', 'visible', 'hidden'.
                // Defaults to 'auto'
                horizontal: 'visible',

                verticalScrollbarSize: 17,
                horizontalScrollbarSize: 17,
                arrowSize: 30
            }
        });

        var modesIds = monaco.languages.getLanguages().map(function (lang) { return lang.id; });
        modesIds.sort();

        //Dil Secim Listesini ayarlar
        var startModeIndex = 0;
        for (var i = 0; i < modesIds.length; i++) {
            var o = document.createElement('option');
            o.textContent = modesIds[i];
            o.value = modesIds[i];
            if (modesIds[i] === 'javascript') {
                startModeIndex = i;
            }
            $(".language-picker").append(o);
        }
        $(".language-picker")[0].selectedIndex = startModeIndex;

        //loadSample(modesIds[startModeIndex]);

        $(".language-picker").change(function () {
            monaco.editor.setModelLanguage(editor.getModel(), modesIds[this.selectedIndex]);
        });

        $(".theme-picker").change(function () {
            changeTheme(this.selectedIndex);
        });

    });


}
function changeTheme(theme) {
    var newTheme = (theme === 1 ? 'vs-dark' : (theme === 0 ? 'vs' : 'hc-black'));
    monaco.editor.setTheme(newTheme);
}

function loadData(data) {
    $('.loading.editor').show();

    var oldModel = editor.getModel();
    var newModel = monaco.editor.createModel(data.Snip, data.SnippetTypeID);
    editor.setModel(newModel);
    monaco.editor.setTheme(data.SnippetThemeID);
    if (oldModel) {
        oldModel.dispose();
    }
    $('.loading.editor').fadeOut({ duration: 300 });

}

<script>var require = { paths: { 'vs': '../Content/monaco-editor/min/vs' } };</script>
<script src="~/Content/monaco-editor/min/vs/loader.js"></script>
<script src="~/Content/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
<script src="~/Content/monaco-editor/min/vs/editor/editor.main.js"></script>
    
<div class="row">
    <div class="col-lg-9">
        <div class="row" style="padding-bottom:10px;">
            <div class="col-lg-4">
                <label for="languageSelect">Language</label>
                <select class="form-control form-control-sm language-picker" id="languageSelect"></select>
            </div>
            <div class="col-lg-4">
                <label class="control-label" for="theme">Theme</label>
                <select class="form-control form-control-sm theme-picker" id="theme">
                    <option value="vs">Visual Studio</option>
                    <option value="vs-dark">Visual Studio Dark</option>
                    <option value="hc-black">High Contrast Dark</option>
                </select>
            </div>
        </div>

        <div class="editor-frame">
            <div class="loading editor" style="display: none;">
                <div class="progress progress-striped active">
                    <div class="bar"></div>
                </div>
            </div>
            <div id="editor" style="width:100vh;height:61vh;border:1px solid grey"></div>
        </div>
    </div>
</div>