pika/scripts
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

addet vimpage

Browse source
This commit is contained in:
pika 2025-04-18 20:09:03 +02:00
parent 7a15a56b36
commit 595c4e1fea
1 changed files with 95 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

95
html/vimpage.html Normal file
View file

@ -0,0 +1,95 @@
<!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>