### Typora Source Code Mode Syntax Highlighting (CSS)

Source: https://theme.typora.io/doc/Write-Custom-Theme

CSS example for styling headers in Typora's source code mode, which uses CodeMirror with the '.cm-s-typora-default' theme.

```css
.cm-s-typora-default .cm-header {
  /*styles for h1~h6 in source code mode*/
}
```

--------------------------------

### Structure of a Typora Strong Element (HTML)

Source: https://theme.typora.io/doc/Write-Custom-Theme

An example of how a markdown 'strong' element is rendered in HTML within Typora, showing wrapper spans, meta syntax, and the output element.

```html
<!--wrapper for strong element-->
<span md-inline="strong" class=""> 
  
  <!--meta syntax for strong element-->
  <span class="md-meta md-before">**</span> 
  
    <!--output for strong element-->
    <strong>
      <!--inner output-->
      <span md-inline="plain">strong</span> 
    </strong>
  
   <!--meta syntax for strong element-->
  <span class="md-meta md-after">**</span>
</span>
```

--------------------------------

### Styling Block Elements in Typora

Source: https://theme.typora.io/doc/Write-Custom-Theme

Demonstrates how to style common Markdown block elements like paragraphs, headings, and tables using CSS selectors. It also shows how to scope styles to the writing area using the `#write` ancestor selector or to specific dialogs using classes like `.dialog`.

```css
p {...}
h1 {...}
table {...}
table th td {...}
table tr:nth-child(2n) td {...}
...

/*this will only aplly to h4 in dialogs popped up by typora (just an example)*/
.dialog h4 {...} 

/*this will only apply to h4 inside writing area, which is generated after user input "#### " */
#write h4 {...} 

```

--------------------------------

### Styling Basic Inline Markdown Elements (CSS)

Source: https://theme.typora.io/doc/Write-Custom-Theme

CSS rules for basic inline markdown elements like strong, emphasis, code, and links. These styles are typically handled by the markdown parser but can be overridden.

```css
strong {
  font-weight: bold;
}
em {..}
code {..}
a {..}
img {..}
mark {..} /*highlight*/
```

--------------------------------

### General Typora Styling with CSS

Source: https://theme.typora.io/doc/Write-Custom-Theme

Applies general styles to the Typora window, including background color, font family, and font size. It also demonstrates how to adjust the writing area's dimensions and font properties. Styles set on `html` apply globally, while styles under `#write` are specific to the writing content.

```css
/** example **/
html, body {
  background-color: #fefefe; /*background color of the window and titlebar*/
  font-family: helvetica, sans-serif; /*custom font*/
  ...
}

html {
  font-size: 14px; /*default font size*/
}

#write {
  max-width: 90%; /*adjust size of the wriring area*/
  font-size: 1rem; /*basic font size*/
  color: #555; /*basic font color*/
  ...
}

```

--------------------------------

### Typora CSS Variables for Theming

Source: https://theme.typora.io/doc/Write-Custom-Theme

This snippet demonstrates common CSS variables used in Typora for customizing the theme's appearance. These variables control elements like background, text color, meta characters, buttons, borders, and sidebar.

```css
:root {
   --bg-color:  #ffffff; /*change background*/
   --text-color: #333333; /*change text color*/
   --md-char-color: #C7C5C5; /*change color of meta characetrs like `*` in markdown */
   --meta-content-color: #5b808d; /*change color of meta contents like image text or link address in markdown */

   --primary-color: #428bca; /* color of primary buttons */
   --primary-btn-border-color: #285e8e;
   --primary-btn-text-color: #fff;

   --window-border: 1px solid #eee; /*border for sidebar, etc*/

   --active-file-bg-color: #eee; /*background color if list item in file tree or file list*/
   --active-file-text-color: inherit;
   --active-file-border-color: #777;

   --side-bar-bg-color: var(--bg-color); /*change background of sidebar*/
   --item-hover-bg-color: rgba(229, 229, 229, 0.59); /*background of control items when hover, like menu in sidebar*/
   --item-hover-text-color: inherit;
   --monospace: monospace; /*monospace font for codes, fences*/
}

```

--------------------------------

### Styling Diagrams with CSS

Source: https://theme.typora.io/doc/Write-Custom-Theme

Provides CSS selectors for styling different types of diagrams rendered in Typora, such as sequence, flow, and Mermaid diagrams. These are treated as special code fences with specific language attributes.

```css
pre[lang=’sequence’], pre[lang=’flow’], pre[lang=’mermaid’] { ... }
```

--------------------------------

### Print and PDF Export Styles (CSS)

Source: https://theme.typora.io/doc/Write-Custom-Theme

CSS rules within the @media print block to specifically style content for printed output or exported PDFs. This includes setting print color adjustments.

```css
@media print {
    /* for example: */
    .typora-export * {
        -webkit-print-color-adjust: exact;
    }
    /* add styles here */
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.