@import 'highlight.js/styles/agate';

code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

pre code {
  @apply border leading-snug text-sm -mx-4;
  background-color: none;
  overflow: auto;
  font-weight: normal;
}

.hljs {
  @apply p-4;
}

@screen md {
  pre code {
    @apply rounded -mx-6;
  }

  .hljs {
    @apply p-6;
  }

}

@screen lg {
  pre code {
    @apply -mx-8 text-base rounded-lg;
  }

  .hljs {
    @apply p-8;
  }
}

@import 'highlight.js/styles/dracula';

/* Dracula-specific override */
.hljs-comment {
  color: #8293c6;
}

code {
  @apply bg-gray-400 p-1 text-sm;

  background-color: ghostwhite;
}

pre {
  @apply mb-6;
  display: block;
  word-break: break-all;
  word-wrap: break-word;
}

pre code {
  background-color: none;
  overflow: auto;
  font-weight: normal;
}

pre code,
.hljs {
  @apply border leading-snug text-sm -mx-4 p-4;
}

@screen md {
  pre code,
  .hljs {
    @apply rounded -mx-6 p-6;
  }
}

@screen lg {
  pre code,
  .hljs {
    @apply text-base rounded-lg -mx-8 p-8;
  }
}

Update syntax highlighting to dracula
Update syntax highlighting to dracula
