froala-editor/css/plugins/code_snippet.css

The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.

/*!
 * froala_editor v5.0.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2026 Froala Labs
 */

.fr-clearfix::after {
  clear: both;
  display: block;
  content: "";
  height: 0; }

.fr-hide-by-clipping {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.fr-code-snippet-layer.fr-modal-wrapper .fr-modal-head {
  border-bottom: unset; }
.fr-code-snippet-layer .fr-code-snippet-header {
  display: flex;
  line-height: 60px;
  margin-left: 10px; }
  .fr-code-snippet-layer .fr-code-snippet-header .fr-align-right .fr-btn {
    height: 24px;
    width: 24px;
    margin: 0; }
    .fr-code-snippet-layer .fr-code-snippet-header .fr-align-right .fr-btn .fr-svg {
      margin: 0; }
.fr-code-snippet-layer .fr-active.fr-layer {
  margin: 0 16px;
  display: flex;
  flex-direction: column; }
  .fr-code-snippet-layer .fr-active.fr-layer .fr-code-snippet-lang.fr-toolbar {
    border: none; }
    .fr-code-snippet-layer .fr-active.fr-layer .fr-code-snippet-lang.fr-toolbar button.fr-command.fr-btn {
      outline: solid 1px #999999;
      color: #333333;
      width: 250px; }
    .fr-code-snippet-layer .fr-active.fr-layer .fr-code-snippet-lang.fr-toolbar .fr-dropdown-content {
      width: 250px; }
  .fr-code-snippet-layer .fr-active.fr-layer pre {
    position: relative;
    border-radius: 3px;
    font-family: "Fira Code", monospace;
    font-size: 14px;
    height: 330px;
    margin: 16px 0; }
    .fr-code-snippet-layer .fr-active.fr-layer pre code {
      outline: none;
      display: block;
      width: 100%;
      height: 100%; }
  .fr-code-snippet-layer .fr-active.fr-layer .fr-float-right {
    align-self: flex-end; }
    .fr-code-snippet-layer .fr-active.fr-layer .fr-float-right .fr-enable-accessibility.submit {
      margin-left: unset;
      border: 1px solid #0098F7; }

/* Froala code block styling */
.fr-view .fr-code-snippet {
  margin: 1em 0;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0;
  margin-bottom: 14px; }
  .fr-view .fr-code-snippet .fr-code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ECECEC;
    padding: 10px 16px;
    color: #000;
    font-size: 14px; }
    .fr-view .fr-code-snippet .fr-code-header .fr-code-actions {
      display: flex;
      gap: 8px; }
      .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button {
        cursor: pointer;
        border: none;
        width: 20px;
        height: 22px;
        padding: 2px;
        background: transparent;
        margin-left: 5px;
        border-radius: 3px;
        line-height: 1px; }
        .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button:hover {
          background: #cecdcd; }
        .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button:active {
          background: #b8b6b6; }
        .fr-view .fr-code-snippet .fr-code-header .fr-code-actions button .fr-sr-only {
          display: none; }
  .fr-view .fr-code-snippet pre {
    margin: 0;
    overflow-x: auto;
    font-size: 14px; }
  .fr-view .fr-code-snippet code {
    font-family: "Fira Code", Consolas, monospace;
    font-size: 14px;
    line-height: 1.5;
    background: transparent; }

.pdf-export.fr-view .fr-code-actions {
  display: none;
  visibility: hidden; }