Typora like custom CSS

ChezFrancois · February 11, 2021, 3:19pm

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;
}

Fastidious · February 11, 2021, 3:34pm

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

ChezFrancois · February 11, 2021, 8:22pm

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.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.

Archie · February 11, 2021, 8:36pm

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

Fastidious · February 12, 2021, 12:36am

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

afokapu · February 13, 2021, 10:42am

What about images and videos?
How are they handled ?

Klaas · February 13, 2021, 12:49pm

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

axcraig · February 13, 2021, 6:57pm

This is awesome! Thanks

bepolymathe · February 13, 2021, 8:48pm

How you make installation ?

axcraig · February 13, 2021, 8:52pm

As above:

bepolymathe · February 13, 2021, 9:09pm

Thanks

dixonge · February 19, 2021, 11:05pm

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

Thank you!

ChezFrancois · February 20, 2021, 4:52pm

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

Klaas · February 26, 2021, 3:57pm

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

Harrison · March 2, 2021, 9:41am

This is great, thank you

dcanosa · March 6, 2021, 4:07pm

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.

Thanks!

dcanosa · March 6, 2021, 4:56pm

@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;
}`

Hermann · March 7, 2021, 5:18pm

@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)?

ChezFrancois · March 8, 2021, 10:13am

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.

ChezFrancois · March 8, 2021, 10:14am

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.