Typora custom style (mac style code block, quote block, bold, highlight, picture on the left by default, inline code)

Table of contents

1. Find the CSS file

2. Modify CSS style

1. mac style code block

2. Quotation block>

3. Bold**

4. Highlight ==

5. The picture is on the left by default

6. Inline code``

---

1. Find the CSS file

Typora's Preferences << Appearance << Open the theme folder:

After opening it, you can see all the existing styles of your Typora:

After that, just open an existing CSS file or create a new CSS file of your own, write the style you want, and it will take effect after restarting Typora.

Reminder: If you are just modifying existing CSS files, switching to another theme and back will also take effect.

2. Modify CSS style

I modified it based on github.css, and I feel that its basic framework is already very good.

The difficulty lies in not knowing which selector the corresponding one is. Once you find the correct selector, you can click CSS.

1. mac style code block

Essential mac-style code blocks. The original blogger here designed it in a dark style, but I changed it to a day style.

/* 代码块样式 */
/* 设置整体 */
.md-fences {
  background-color: #f8f8f8;
  border-radius: 5px;
  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
  padding-top: 30px;
  font-family: monospace, 'PingFang SC', 'Microsoft YaHei';
}

/* 设置三个圈圈 */
.md-fences::before {
  background: #fc625d;
  border-radius: 50%;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
  height: 12px;
  left: 12px;
  margin-top: -20px;
  position: absolute;
  width: 12px;
}

2. Quotation block>

blockquote {
  color: #304455;
  border-radius: 2px;
  padding: 10px 16px;
  background-color: #fdefee;
  position: relative;
  border-left: none;
}

blockquote:before {
  display: block;
  position: absolute;
  content: '';
  width: 4px;
  left: 0;
  top: 0;
  height: 100%;
  background-color: #e95f59;
  border-radius: 2px;
}

3. Bold**

strong {
  font-size: 20px;
  color: #e95f59;
}

4. Highlight ==

mark {
  background: #fdefee;
  color: #e95f59;
  font-size: 18px;
  margin: 0 5px;
  font-weight: bold;
}

5. The picture is on the left by default

Add this code:

p .md-image:only-child {
  width: auto;
  text-align: left;
}

6. Inline code``

code {
  background-color: rgba(66, 185, 131, 0.1);
  padding: 0 2px 0 2px;
  color: #42b983;
}