.ngx-editor {
  position: relative;

  ::ng-deep [contenteditable="true"]:empty:before {
    content: attr(placeholder);
    display: block; // for firefox
    color: #868e96;
    opacity: 1;
  }

  .ngx-wrapper {
    position: relative;

    .ngx-editor-textarea {
      min-height: 5rem;
      padding: 0.5rem 0.8rem 1rem 0.8rem;
      border: 1px solid #ddd;
      background-color: transparent;
      overflow-x: hidden;
      overflow-y: auto;
      z-index: 2;
      position: relative;

      &:focus,
      &.focus {
        outline: 0;
      }

      ::ng-deep blockquote {
        margin-left: 1rem;
        border-left: 0.2em solid #dfe2e5;
        padding-left: 0.5rem;
      }
    }

    ::ng-deep p {
      margin-bottom: 0;
    }

    .ngx-editor-placeholder {
      display: none;
      position: absolute;
      top: 0;
      padding: 0.5rem 0.8rem 1rem 0.9rem;
      z-index: 1;
      color: #6c757d;
      opacity: 1;
    }

    &.show-placeholder {
      .ngx-editor-placeholder {
        display: block;
      }
    }
  }
}

pre {
  background: #303030;
  counter-reset: line;
  color: #f1f1f1;
  padding: 10px 16px;
  border-radius: 2px;
  border-top: 4px solid #00aeef;
  -moz-box-shadow: inset 0 0 10px #000;
  box-shadow: inset 0 0 10px #000;
}
pre span {
    display: block;
    line-height: 1.5rem;
    counter-increment: line;
}
pre span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  border-right: 1px solid #ddd;
  padding: 0 .5em;
  margin-right: .5em;
  color: #888
}