how to change the display languge

[leexiaozheng]

i need to change the display language, don`t know how to do?

[mattgodbolt]

If you're referring to the language the syntax highlight uses, then I think

editor.updateOptions({
  language: "cpp"  // or whatever language you need here, javascript, or go or whatever
});

should do the trick.

[leexiaozheng]

i have solved the issue:
(<any>window).require.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } });

[Lewiskong]

it doesn't work when i use

editor.updateOptions({
  language: "cpp"  // or whatever language you need here, javascript, or go or whatever
});

with editor.updateOptions , i can only change theme ,but the language change doesn't work

[akosyakov]

You should change a language on a model: monaco.editor.setModelLanguage(editor.getModel(), "cpp")

[SoftTimur]

Are you sure monaco.editor.setModelLanguage(editor.getModel(), "cpp") works? I have got an error TypeError: monacoeditor.setModelLanguage is not a function in this code.

In my code monacoeditor seems to be ICommonCodeEditor, I also tried monacoeditor.getModel().updateOptions({ "language": newValues[key] }), it did not raise any error, but it just did nothing.

Note that it is not the problem of the directive, because it works well to change lineNumbers.

Could anyone help?

[datummm]

@SoftTimur I believe monaco.editor.setModelLanguage(editor.getModel(), "cpp") should work as written (note that it is monaco.editor and not monacoeditor) as long as the editor of editor.getModel() is an editor instance created by monaco.editor.create();

It's confusing because setModelLanguage is a function in the monaco.editor module, and not a method of any particular monaco editor/model instance, as some (myself included) would expect.

[SGissubel]

I have tried window.monaco.editor.setModelLanguage(editor.getModel(), "cpp") and window.monaco.editor.setModelLanguage(window.monaco.editor.getModel(), "cpp")
The latter is half way there I think? But i get "Cannot read property 'toString' of undefined" when I try to use this (which is stemming from the getModel method)....

I have been at this for hours. (Using Angular 5), So I am creating the editor with simple html, <ngx-monaco-editor id="monaco-editor" [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
But creating a global instance through the app module, with: const monacoConfig: NgxMonacoEditorConfig = { baseUrl: 'app-name/assets', // configure base path for monaco editor defaultOptions: { scrollBeyondLastLine: false }, // pass deafult options to be used onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be avilable as window.monaco use this function to extend monaco editor functionalities. };
So I am just trying through the console right now...

Can anyone be of assistance?

[SGissubel]

Welp... hackin my way through....

window.monaco.editor.setModelLanguage(window.monaco.editor.getModels()[0], 'typescript')

this seems to work for me

[rcjsuen]

@SGissubel The getModel(URI) function takes a URI parameter.

https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#getmodel

You can't just call window.monaco.editor.setModelLanguage(editor.getModel(), "cpp") as you're not satisfying fulfilling the function's parameter requirements. You need to give it something so that Monaco knows which model to give you.

[SGissubel]

@rcjsuen
Umm.. Nope? But thank you! Like I said previously, that was not working for me. Editor was coming up undefined. I went through the docs for hours.

As mentioned though....
window.monaco.editor.setModelLanguage(window.monaco.editor.getModels()[0], 'typescript')
this works! So, all good!

[rcjsuen]

@SGissubel Yes, I realize that that function was not working for you. And I was explaining to you why the code you wrote won't work because you need to provide the getModel function with a URI parameter. It is mentioned in the API documentation.

https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#getmodel

getModel
getModel(uri: Uri): IModel
Defined in monaco.d.ts:855
Get the model that has uri if it exists.

Parameters
uri: Uri
Returns IModel

You shouldn't call editor.getModel() without any parameters. I am not sure why the original comment did not mention this. Perhaps there was a change in the API or perhaps it was a typo. But in Monaco 0.10.1 anyway, you the getModel function expects a monaco.URI parameter.

[SGissubel]

@rcjsuen Absolutely... the documents are a maze of mine-fields and dead ends. As I said, I combed those documents thoroughly for most of the day. URI is still a bit ambiguous to me, how it's recieved, what it is... So for now, the getModels()[0] works for me and does the job.

[rcjsuen]

Here is some code that you can try in the Monaco Editor Playground. If you click on the button you can toggle between JavaScript syntax highlighting and HTML syntax highlighting. Good luck with your project!

JavaScript:

const value = `function test() {
}
<button onclick="change()">Click</button>
<div id="container" style="height:90%;"></div>`;

const model = monaco.editor.createModel(value, "javascript");
monaco.editor.create(document.getElementById("container"), {
	model: model
});

var js = true;

function change() {
    js = !js;
    var language = js ? "javascript" : "html";
    monaco.editor.setModelLanguage(monaco.editor.getModel(model.uri), language);
}

HTML:

<button onclick="change()">toggle language</button>
<div id="container" style="height:90%;"></div>

[krikz]

i have solved the issue:
(<any>window).require.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } });

Where you are put this code? I'm trying put it to monacoConfig.onMonacoLoad but it doesn't work :(

export function onMonacoLoad() {
console.log((window as any).monaco);
(window as any).require.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });
}
.....
const monacoConfig: NgxMonacoEditorConfig = {
baseUrl: environment.apiRoot + '/assets',
defaultOptions:
{
theme: 'vs',
language: 'xml',
readOnly: true,
minimap: { enabled: false },
automaticLayout: true,
contextmenu: false
},
onMonacoLoad: onMonacoLoad
};
.............
MonacoEditorModule.forRoot(monacoConfig)

[Symbolk]

Anyone knows how to change the language according to code file extension or first line like "#!/usr/bin/env python"?