web-code-editor
Version:
web code editor
77 lines (70 loc) • 2.27 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
html,
body {
position: relative;
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
</style>
<link
rel="stylesheet"
data-name="vs/editor/editor.main"
href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/editor/editor.main.min.css"
/>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet" />
<% } %>
</head>
<body>
<% for (var js of htmlWebpackPlugin.files.js) { %>
<script src="<%= js %>"></script>
<% } %>
<script>
var require = {
paths: {
vs:
"https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs",
},
"vs/nls": { availableLanguages: { "*": "zh-cn" } },
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/loader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/editor/editor.main.nls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/editor/editor.main.nls.zh-cn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.22.3/min/vs/editor/editor.main.js"></script>
<script>
// monaco.editor.setModelLanguage(editor.getModel(), lang);
var editor;
new WebCodeEditor.WebCodeEditor(
document.body,
(place) => {
editor = monaco.editor.create(place, {
language: "javascript",
theme: "vs-dark",
automaticLayout: true,
});
return editor;
},
{
languageMap: {
md: "markdown",
ts: "typescript",
js: "javascript",
pl: "perl",
kt: "kotlin",
},
}
);
</script>
</body>
</html>