Styling - slugcat-dev/mark-ed GitHub Wiki

[!WARNING] Be careful with using the display and position properties, some browsers are very sensitive to these. For example, having an element with display: inline-block in a line prevents navigation with the arrow keys in that line in WebKit-based browsers.

Basic

/* Use your prefered font and size here */
.md-editor {
  padding: 1rem;
  font-size: .875rem;
  font-family: sans-serif;
  line-height: 1.25rem;
}

.md-line {
  position: relative;
}

/* Make marks slightly transparent. You can choose any color you like though */
.md-mark {
  color: color-mix(in srgb, currentColor, transparent 50%);
}

Using hideMarks

This feature automatically hides Markdown syntax where you don't edit, like in Obsidian.

/* Hide marks, don't use `display: none`, it causes unexpected behaviour */
.md-hidden {
  font-size: 0;
  line-height: 0;
}

/* Don't hide code block marks */
.md-code-block .md-hidden {
  font-size: inherit;
  line-height: inherit;
}

/* Hide checkboxes when the checkmark is visible */
.md-task:has(.md-mark:not(.md-hidden)) .md-checkbox {
  display: none;
}

Fancies

/* Show an actual line for thematic breaks */
.md-hr:has(.md-mark.md-hidden)::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: lightgray;
}

/* Custom code font */
.md-code,
.md-code-block {
  font-family: 'Ubuntu Mono', monospace;
}

/* Add a line to blockquotes when the mark is hidden */
.md-quote > .md-mark.md-hidden {
  font-size: inherit;
  line-height: inherit;
  color: transparent;

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    width: 3px;
    height: calc(100% + 2px);
    background-color: lightgray;
    border-radius: .125rem;
  }
}

.md-task {
  /* Make all checkmarks the same width */
  .md-checkmark {
    font-family: 'Ubuntu Mono', monospace;
  }

  /* Align checkboxes correctly */
  .md-checkbox {
    display: inline-flex;
    position: relative;
    top: .125rem;
    margin-inline-end: .25rem;

    input {
      width: .875rem;
      height: .875rem;
      margin: 0;
      cursor: pointer;
    }
  }
}