Typora like custom CSS

Leveraging several proposals to tweak Obsidian and make it behave as nearly as possible from Typora in the edition mode, I came to the following CSS snippet that works wonderfully well, yet staying simple.

Use it at your leisure:

/* inline formatting, link targets and [[ ]] disappears if not active line*/
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link),
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment
{ display: none; }

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag {
  display: none !important;

/* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT */
/* div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; } */

/* except list markers */ span.cm-formatting-list,
/*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock,

/* and task checkboxes */
/*span.cm-formatting-task { display: inline !important; font-family: monospace; }

/* Checkboxes instead of brackets in edit mode */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property {
    color: transparent;
    position: relative;
    display: inline !important;
    margin-right: -0.1rem;

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta:after,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
    content: "○";
    position: absolute;
    top: 3px;
    left: 0px;
    color: rgb(219, 95, 12);
    font-size: 18px;
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
  content: "✓";
  color: rgb(124, 131, 124) !important;
span.cm-formatting-task.cm-property ~ span {
  text-decoration: line-through;
  color: rgb(124, 131, 124) !important;

/* except image markdown */
.CodeMirror-line span.cm-formatting.cm-formatting-image.cm-image.cm-image-alt-text.cm-link,
.CodeMirror-line span.cm-formatting.cm-formatting-image.cm-image.cm-image-marker {
  display: inline !important;

/* Change links color */
.cm-s-obsidian span.cm-link, .cm-s-obsidian span.cm-hmd-internal-link {
    color: rgb(15, 112, 223);
    text-decoration: underline;

/* Editor Mode Tables */
.CodeMirror pre.HyperMD-table-row {
    font-family: var(--font-monospace);
    font-size: calc(var(--font-normal) - 1px);

/* Tables */

.markdown-preview-view th {
    font-weight: var(--bold-weight);
    text-align: left;
    border-top: none;
  .markdown-preview-view th:last-child,
  .markdown-preview-view td:last-child {
    border-right: none;
  .markdown-preview-view th:first-child,
  .markdown-preview-view td:first-child {
    border-left: none;
    padding-left: 0;
  .markdown-preview-view tr:last-child td {
    border-bottom: none;

  /* Blockquote: in edit mode with left border rendered instead of > */
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote,
  div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote {
    display: inline !important;
    color: transparent !important;
  div:not(.CodeMirror-activeline)>.HyperMD-quote {
      background-color:rgb(238, 234, 234);
      border-left: 3px solid var(--text-selection);
      border-color: rgba(255, 0, 0, 0.589) !important; 
      border-radius: 0 8px 8px 0;
      font-size: 17px;
      line-height: 1.5em;
      margin-left: 5px;
      padding: 8px 18px 8px 8px; /* Haut, Droite, Bas, Gauche */
      display: inline-block;

  /* Tag pills in edit mode */
   div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before {
    content: '';
  .tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end {
  background-color: rgb(30, 123, 177); /* was var(--text-accent); */
  border: none;
  color: white !important;
  font-size: 14px;
  padding: 2px 8px;
  padding-top: -2px;
  padding-bottom: 3px;
  text-align: center;
  /*text-decoration: underline;
  /*text-decoration: none !important;*/
  display: inline-block;
  margin: 1px 1px;
  cursor: pointer;
  border-radius: 7px;
  .tag:hover {
  color: white;
  background-color: var(--text-accent-hover);

/* Horizontal line in edit mode. Changes --- to full-width line */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr {
  color: transparent;
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hr::after {
  content: "";
  position: absolute;
  background: rgb(102, 101, 101);
  height: 1px;
  width: 100%;
  left: 0;
  top: 50%;

/* some space above titles */
span.cm-header {
  margin-top: 6px;
  display: inline-block;
span.cm-header.cm-header-5, span.cm-header.cm-header-6 {
  margin-top: 3px;

I use Typora, yet I don’t understand what your snippet is meant to accomplish. Can you explain, or provide screenshots? Thanks!

You’re right Fastidious, I have been rather short in explanations.
Here below you will find the before/after screenshots, and a short “How to”

Before (native Obsidian editor User Interface):

After (editor UI using the CSS Snippet, see How to below):

The active line changes back to standard Markdown automatically:
Capture d’écran 2021-02-11 à 21.07.55

Capture d’écran 2021-02-11 à 21.08.01

Capture d’écran 2021-02-11 à 21.08.09

Short How To

In Obsidian parameters

  • go to the “Appearance” part
  • at the end of the parameters, there is the “CSS snippets” part
  • you can access the folder where those CSS files are stored by clicking on the folder icon next to the title “CSS snippets”.
  • create a CSS file in this folder, copy paste the exact content of the CSS code shared in my initial post, in this file
  • save it
  • go back to the parameters, update (click on the icon with the two arrow circling to one another)
  • you will see the name of the file you just created appearing
  • activate it
  • that is it. Your editor UI will behave nearly like Typora (not as clean, but it made the full switch possible for me)

Note: the difference with Typora is much bigger for tables. This CSS snippet makes them easier to read, but not much simpler to edit. Here is a screenshot of a table in edition mode, when this snippet of CSS code is activated:

Note: you can change the color of the checkboxes, links or the horizontal line which is displayed instead of just “—” in standard editor UI.
Hope that answers your question.


That’s wonderful. I hope devs make this available on core Obsidian soon, but for now this would do the job. I must try this specially on tables since you said that part is not perfect tho

1 Like

Very well done! Thank you for the screenshots, and descriptions. Using it right now. :slight_smile:

1 Like

What about images and videos?
How are they handled ?

@afokapu: the Edit mode does NOT render them as videos and images, they remain as links. Only in Preview will they be rendered.

This is awesome! Thanks

How you make installation ?

As above:


Thanks :wink:

I like it. Not 100% Typora, but probably close enough to get me by until it gets baked in.

Thank you!


You’re welcome.
Happy to share some code to make our lives easier.

@ChezFrancois: the code for Checkboxes instead of brackets in edit mode does not work.

This is great, thank you

wow this CSS is amazing!! Congrats on the development.

I have one questions… Is it possible somehow to convert the “-” into real bulletpoints? I haven’t found anything in the code related to that.


@Klaas gave me the solution on Discord.

`/* Unordered lists: turn into bullets as you type, as per Typora */
span.cm-formatting-list-ul {
visibility: hidden !important;

span.cm-formatting-list-ul:after {
content: '• ';
margin-left: -12px;
color: var(–accent);
visibility: visible !important;

@ChezFrancois a realy nice work, Thank you very much.
Is it possible to get this view of the “Typora like CSS” also for the preview (especially for the preview-mode)?

Great job.
I found the “-” lighter for the eyes than the “•”, so I left it like that.
You’re answer is a great complement.
So users can choose chat they prefer.

Thanks for your feedback.
I must confess I didn’t explore much the use of CSS for the preview mode I hardly use for now.