.editor {
  position: relative;
  max-width: 30rem;
  margin: 0 auto 5rem auto; }
  .editor__content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; }
    .editor__content * {
      caret-color: currentColor; }
    .editor__content pre {
      padding: 0.7rem 1rem;
      border-radius: 5px;
      background: rgb(247, 246, 243);
      color: #ffffff;
      font-size: 0.8rem;
      overflow-x: auto; }
      .editor__content pre code {
        display: block; }
    .editor__content p code {
      padding: 0.2rem 0.4rem;
      border-radius: 5px;
      font-size: 0.8rem;
      font-weight: bold;
      background: rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8); }
    .editor__content ul,
    .editor__content ol {
      padding-left: 1rem; }
    .editor__content li > p,
    .editor__content li > ol,
    .editor__content li > ul {
      margin: 0; }
    .editor__content a {
      color: inherit; }
    .editor__content blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.1);
      color: rgba(0, 0, 0, 0.8);
      padding-left: 0.8rem;
      font-style: italic; }
      .editor__content blockquote p {
        margin: 0; }
    .editor__content img {
      max-width: 100%;
      border-radius: 3px; }
    .editor__content table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      margin: 0;
      overflow: hidden; }
      .editor__content table td, .editor__content table th {
        min-width: 1em;
        border: 2px solid #dddddd;
        padding: 3px 5px;
        vertical-align: top;
        box-sizing: border-box;
        position: relative; }
        .editor__content table td > *, .editor__content table th > * {
          margin-bottom: 0; }
      .editor__content table th {
        font-weight: bold;
        text-align: left; }
      .editor__content table .selectedCell:after {
        z-index: 2;
        position: absolute;
        content: "";
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(200, 200, 255, 0.4);
        pointer-events: none; }
      .editor__content table .column-resize-handle {
        position: absolute;
        right: -2px;
        top: 0;
        bottom: 0;
        width: 4px;
        z-index: 20;
        background-color: #adf;
        pointer-events: none; }
    .editor__content .tableWrapper {
      margin: 1em 0;
      overflow-x: auto; }
    .editor__content .resize-cursor {
      cursor: ew-resize;
      cursor: col-resize; }
  .editor pre::before {
    content: attr(data-language);
    text-transform: uppercase;
    display: block;
    text-align: right;
    font-weight: bold;
    font-size: 0.6rem; }
  .editor pre code .hljs-comment,
  .editor pre code .hljs-quote {
    color: #999999; }
  .editor pre code .hljs-variable,
  .editor pre code .hljs-template-variable,
  .editor pre code .hljs-attribute,
  .editor pre code .hljs-tag,
  .editor pre code .hljs-name,
  .editor pre code .hljs-regexp,
  .editor pre code .hljs-link,
  .editor pre code .hljs-name,
  .editor pre code .hljs-selector-id,
  .editor pre code .hljs-selector-class {
    color: #f2777a; }
  .editor pre code .hljs-number,
  .editor pre code .hljs-meta,
  .editor pre code .hljs-built_in,
  .editor pre code .hljs-builtin-name,
  .editor pre code .hljs-literal,
  .editor pre code .hljs-type,
  .editor pre code .hljs-params {
    color: #f99157; }
  .editor pre code .hljs-string,
  .editor pre code .hljs-symbol,
  .editor pre code .hljs-bullet {
    color: #99cc99; }
  .editor pre code .hljs-title,
  .editor pre code .hljs-section {
    color: #ffcc66; }
  .editor pre code .hljs-keyword,
  .editor pre code .hljs-selector-tag {
    color: #6699cc; }
  .editor pre code .hljs-emphasis {
    font-style: italic; }
  .editor pre code .hljs-strong {
    font-weight: 700; }
