monaco-diff-editor All In One
vscode online
https://eslint.vuejs.org/rules/html-indent.html
https://microsoft.github.io/monaco-editor/playground.html#creating-the-diffeditor-navigating-a-diff
monaco-diff-editor
monaco-editor
A browser based code editor
https://microsoft.github.io/monaco-editor/
https://github.com/microsoft/monaco-editor
theme
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/vs' }});
require(['vs/editor/editor.main'], () => {
const box = document.getElementById('container');
const options = {
theme: "vs-dark",
// 设置编辑器主题风格
};
const editor = monaco.editor.createDiffEditor(box, options);
console.log('editor =', editor);
const text1 = 'js code old';
const text2 = 'js code new';
editor.setModel({
original: monaco.editor.createModel(text1, 'javascript'),
modified: monaco.editor.createModel(text2, 'javascript'),
// original: monaco.editor.createModel(text1, 'javascript', 'vs-dark'),
// modified: monaco.editor.createModel(text2, 'javascript', 'vs-dark'),
// language: "javascript",
// //语言类型
// theme: "vs-dark",
// // 显示的主题
});
// monaco.editor.setTheme('vs-dark');
// editor.setTheme('vs-dark');
// editor.updateOptions({
// theme: "vs-dark",
// //vs-dark为要设置的显示风格
// });
const input = document.querySelector('.inline-it');
input.addEventListener('change', (e) => {
editor.updateOptions({
renderSideBySide: !e.target.checked,
// theme: "vs-dark",
});
});
});
refs
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！