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, 禁止轉載 🈲️，侵權必究⚠️！

---