目次
1. CSS ファイルを見つけます。
Typora の設定 << 外観 << テーマフォルダーを開きます。
それを開くと、Typora の既存のスタイルがすべて表示されます。
その後、既存の CSS ファイルを開くか、独自の新しい CSS ファイルを作成し、必要なスタイルを記述するだけで、Typora を再起動すると有効になります。
注意: 既存の CSS ファイルを変更しているだけの場合は、別のテーマに切り替えたり、元に戻したりすることも有効になります。
2.CSSスタイルを変更する
github.cssをベースに改造してみましたが、基本的な枠組みはかなり良くなっていると感じます。
問題は、対応するセレクターがどのセレクターであるかわからないことです。正しいセレクターが見つかったら、[CSS] をクリックします。
1. Mac スタイルのコード ブロック
必須の Mac スタイルのコード ブロック。元のブロガーさんはダークスタイルでデザインしていましたが、デイスタイルに変更しました。
/* 代码块样式 */
/* 设置整体 */
.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. 引用ブロック>
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. 太字**
strong {
font-size: 20px;
color: #e95f59;
}4. ハイライト ==
mark {
background: #fdefee;
color: #e95f59;
font-size: 18px;
margin: 0 5px;
font-weight: bold;
}5. デフォルトでは画像は左側にあります
このコードを追加します。
p .md-image:only-child {
width: auto;
text-align: left;
}6. インラインコード``
code {
background-color: rgba(66, 185, 131, 0.1);
padding: 0 2px 0 2px;
color: #42b983;
}