css实现代码编辑器拖动分割容器效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：css实现代码编辑器拖动分割容器效果代码，使用prism来格式化显示代码，css实现拖拽。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
<style>
* {
  box-sizing: border-box;
}

:root {
  --aspect-ratio: 16 / 10;
  --min-width: 0.5rem;
  --frame: hsl(0 0% 25%);
}

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: black;
}

.panels {
  container-type: inline-size;
  width: 90vmin;
  aspect-ratio: var(--aspect-ratio);
  display: grid;
  grid-template-columns: auto 1fr;
  overflow: hidden;
  border: 4px solid var(--frame);
  box-shadow: 0 -1px hsl(0 0% 100% / 0.75);
}

.panel:first-of-type {
  position: relative;
}

/* .resizer {
  position: relative;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  resize: horizontal;
  overflow: hidden;
  max-width: calc(100cqi - 100px);
  min-width: 100px;
  transform-origin: 100% 100%;
  scale: 40;
  translate: 24px 0;
  background: green;
  clip-path: inset(0 0 0 calc(100% - 1px));
} */

.resizer {
  position: relative;
  top: 50%;
  right: 0;
  height: 48px;
  width: 400px;
  resize: horizontal;
  overflow: hidden;
  max-width: calc(100cqi - var(--min-width));
  min-width: calc(var(--min-width) * 3);
  transform-origin: 100% 100%;
  scale: 4;
  translate: 14px -50%;
  background: green;
  z-index: 9999;
  -webkit-clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px));
          clip-path: inset(calc(100% - 12px) 0 0 calc(100% - 12px));
  /* Important to hide it */
  opacity: 0;
}

/* Purely used to debug the handle hit spot */
/* .resizer::after {
  content: "";
  height: 12px;
  width: 12px;
  border-radius: 50%;
  background: red;
  position: absolute;
  bottom: 0;
  right: 0;
} */

.panel:first-of-type::before {
  content: "";
  position: absolute;
  width: 1rem;
  top: 0;
  bottom: 0;
  right: 0;
  background: var(--frame);
  translate: 0% 0;
  pointer-events: none;
  z-index: 2;
}

.panel:first-of-type::after {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 2rem;
  top: 50%;
  bottom: 0;
  right: 0;
  background: hsl(10 80% 50%);
  translate: -50% -50%;
  pointer-events: none;
  border-radius: 4rem;
  box-shadow:
    0 1px black,
    0 1px hsl(0 0% 100% / 0.5) inset;
  z-index: 3;
}

.panels:has(.resizer:is(:hover)) .panel:first-of-type::after {
  background: hsl(10 80% 60%);
}

.panels:has(.resizer:is(:active)) .panel:first-of-type::after {
  background: hsl(10 80% 40%);
  box-shadow:
    0 1px black inset,
    0 1px black,
    0 -1px hsl(0 0% 100% / 0.5) inset;
}

.panel {
  background: hsl(0 0% 10%);
}

pre {
  position: absolute;
  inset: 0;
  overflow: auto;
  margin: 0;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: hsl(0 0% 50%) transparent; 
}

.panel:first-of-type pre {
  inset: 0 1rem 0 0;
}

pre::-webkit-scrollbar-track {
  background: transparent;
}
pre::-webkit-scrollbar-thumb {
  background: hsl(0 0% 50%);
}
pre::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: transparent;
}

.panel {
  position: relative;
}



/* All the Prism JS styling */
/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-tomorrow&languages=css+css-extras&plugins=line-numbers+inline-color+toolbar+copy-to-clipboard */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */

code[class*="language-"],
pre[class*="language-"] {
  color: #ccc;
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;

}

/* Code blocks */
pre[class*="language-"] {
  padding: 2rem;
  margin: 0;
  overflow: auto;
  outline: transparent;
}

/* :not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #2d2d2d;
} */

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

pre {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}

.token.punctuation {
  color: #ccc;
}

.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #e2777a;
}

.token.function-name {
  color: #6196cc;
}

.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}

.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}

.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}

.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}

.token.operator,
.token.entity,
.token.url {
  color: #67cdcc;
}

.token.important,
.token.bold {
  font-weight: bold;
}
.toke.........完整代码请登录后点击上方下载按钮下载查看