95 lines
3.3 KiB
HTML
95 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Vim-style Dark Editor</title>
|
|
|
|
<!-- Required dependencies -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/monokai.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.9.96/css/materialdesignicons.min.css">
|
|
|
|
<style>
|
|
/* Dark theme customization */
|
|
:root {
|
|
--bg-color: #1a1a1a;
|
|
--text-color: #f8f8f2;
|
|
--gutter-bg: #2a2a2a;
|
|
--gutter-border: #3a3a3a;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg-color);
|
|
height: 100vh;
|
|
display: flex;
|
|
}
|
|
|
|
.editor-container {
|
|
flex: 1;
|
|
position: relative;
|
|
font-family: 'FiraCode Nerd Font', monospace;
|
|
}
|
|
|
|
/* CodeMirror custom overrides */
|
|
.CodeMirror {
|
|
height: 100vh !important;
|
|
font-family: 'FiraCode Nerd Font', monospace;
|
|
font-size: 14px;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.CodeMirror-gutters {
|
|
background-color: var(--gutter-bg) !important;
|
|
border-right: 1px solid var(--gutter-border) !important;
|
|
}
|
|
|
|
/* Nerd Fonts fallback */
|
|
@font-face {
|
|
font-family: 'FiraCode Nerd Font';
|
|
src: url('https://cdn.jsdelivr.net/gh/ryanoasis/nerd-fonts@master/patched-fonts/FiraCode/Regular/complete/Fira%20Code%20Regular%20Nerd%20Font%20Complete.ttf');
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="editor-container">
|
|
<textarea id="editor"></textarea>
|
|
</div>
|
|
|
|
<!-- CodeMirror and dependencies -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/meta.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/keymap/vim.js"></script>
|
|
|
|
<!-- Syntax modes -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/python/python.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/htmlmixed/htmlmixed.min.js"></script>
|
|
|
|
<script>
|
|
// Initialize editor
|
|
const editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
|
|
lineNumbers: true,
|
|
theme: 'monokai',
|
|
keyMap: 'vim',
|
|
mode: 'javascript',
|
|
showCursorWhenSelecting: true,
|
|
autofocus: true,
|
|
matchBrackets: true,
|
|
autoCloseBrackets: true,
|
|
lineWiseCopyCut: true,
|
|
extraKeys: {
|
|
'Ctrl-S': function(cm) {
|
|
alert('Save implemented here');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto-detect content type
|
|
editor.on('change', (cm) => {
|
|
const mode = CodeMirror.findModeByMIME(cm.getMode().name);
|
|
console.log('Current mode:', mode ? mode.name : 'plain');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|