codemirror实现一个在线代码编辑与运行的控制台效果代码
代码语言:html
所属分类:其他
代码描述:codemirror实现一个在线代码编辑与运行的控制台效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/lib/codemirror.css'> <link rel='stylesheet' href='//repo.bfw.wiki/bfwrepo/js/codemirror/theme/material-palenight.css'> <style> .content #log, .content #editor { flex-wrap: wrap; float: left; height: 100%; width: calc(100% / 2); } .content #log { font-size: 12px; font-weight: normal; font-family: "Consolas", monospace; line-height: 1.3; letter-spacing: 1.4px; } .content #log, .content #editor .CodeMirror .CodeMirror-scroll, .content #editor .CodeMirror .CodeMirror-vscrollbar, .content #editor .CodeMirror .CodeMirror-hscrollbar { overflow-y: auto; } .content #log::-webkit-scrollbar, .content #editor .CodeMirror .CodeMirror-scroll::-webkit-scrollbar, .content #editor .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar, .content #editor .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar { width: 10px; background: #252f69; } .content #log::-webkit-scrollbar-corner, .content #editor .CodeMirror .CodeMirror-scroll::-webkit-scrollbar-corner, .content #editor .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar-corner, .content #editor .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-corner { background: #252f69; } .content #log::-webkit-scrollbar-thumb, .content #editor .CodeMirror .CodeMirror-scroll::-webkit-scrollbar-thumb, .content #editor .CodeMirror .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .content #editor .CodeMirror .CodeMirror-hscrollbar::-webkit-scrollbar-thumb { background: #32408f; } /** Base typography -------------------- */ *, *:before, *:after { box-sizing: inherit; } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } * { box-sizing: border-box; } html { box-sizing: border-box; font-size: 85%; font-family: serif; } html, body { height: 100%; position: relative; } /** body -------------------- */ body { margin: 0; padding: 0; font-size: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-size: 14px; font-style: normal; font-weight: 400; line-height: 14px; } /** App --------------------------*/ body { overflow: hidden; background: #171e44; } .app { padding: 0; height: 100%; position: relative; overflow: hidden; background: #0a0d1e; box-shadow: 0px 3px 3px #0a0d1e; border-radius: 4px; border: 2px solid #252f69; max-width: 760px; max-height: 480px; margin: 3rem auto; } @media (max-width: 760px) { .app { box-shadow: none; border-radius: 0; border: none; max-width: 100%; max-height: 100%; margin: 0; } } .header { height: 2.6rem; background: #252f69; overflow: hidden; font-size: 14px; font-weight: 700; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .header .left { float: left; width: 7rem; } .header .right { float: right; width: 7em; text-align: right; } .header .center { width: calc(100% - 20rem); height: 2.6rem; display: block; padding: 0.2em; float: left; } .header .center span { display: block; text-align: center; margin: 0.4rem; text-transform: capitalize; color: #8bc34a; -webkit-animation: fade 1s 1 ease; animation: fade 1s 1 ease; } @-webkit-keyframes fade { from { opacity: 0; } } @keyframes fade { from { opacity: 0; } } .header a { display: inline-block; text-decoration: none; -webkit-transition: background 500ms ease; transition: background 500ms ease; margin: 0.2rem 0; padding: 0.5rem 1rem; color: #e8ebff; } .header a:first-child { margin-left: 0.2rem; } .header a svg { stroke: #b5bfff; stroke-width: 1px; } .header a:hover, .header a:focus { -webkit-transition: background 500ms ease; transition: background 500ms ease; background: #2f3d88; } .content { display: -webkit-box; display: flex; overflow: hidden; height: calc(100% - 2.6rem); } .content #log { margin: 0; word-break: break-word; white-space: pre-wrap; padding: 0.5rem; background: #111631; color: #e8ebff; } .content #log a { color: #b5bfff; } .content #log .log-string { color: #00c4ff; } .content #log .log-number { color: #f44336; } .content #log .log-boolean { color: #8bc34a; } .content #log .log-object { color: #ffc107; } .content #log .log-undefined { color: #e91e63; font-weight: bold; } .content #editor { resize: none; border: none; outline: none; white-space: pre-wrap; padding: 0; -webkit-transition: background 500ms ease; transition: background 500ms ease; background: #171e44; color: #e8ebff; } .content #editor .CodeMirror { line-height: 1.5; width: 100%; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: bolder; font-size: 13px; letter-spacing: 1.5px; -webkit-transition: background 500ms ease; transition: background 500ms ease; background: #171e44; color: #e8ebff; } .content #editor .CodeMirror .CodeMirror-linenumber { color: white; } .content #editor .CodeMirror .CodeMirror-cursor { border-left: 1px solid white; } .content #editor .cm-s-material-palenight { background: #171e44; color: #e8ebff; height: 100%; } .content #editor .cm-s-material-palenight .CodeMirror-gutter { background: #171e44; border-right: 1px solid #111631; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .content #editor .cm-s-material-palenight:hover, .content #editor .cm-s-material-palenight:focus { -webkit-transition: background 500ms ease; transition: background 500ms ease; outline: none; background: #151b3c; } .clearing { -webkit-animation: clear 800ms ease; animation: clear 800ms ease; } @-webkit-keyframes clear { from { background: white; } } @keyframes clear { from { background: white; } } .gutter { background-color: #10142d; background-repeat: no-repeat; background-position: 50%; cursor: e-resize; } .gutter .gutter-vertical { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII="); } .gutter .gutter-horizontal { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=="); } </style> </head> <body translate="no" > <!-- app --> <main class="app"> <!-- header --> <header class="header"> <!-- left --> <div class="left"> <a href="#" id="run"> <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-play" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M10.804 8L5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0