Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Quick Start and About Themes #83

Open
wants to merge 5 commits into
base: gh-pages
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 49 additions & 26 deletions _posts/basic/2016-01-01-Quick Start.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,92 +17,115 @@ Thank you for choosing **Typora**. This document will help you to start Typora.

## Live Preview

**Typora** uses the feature: *Live Preview*, meaning that you could see these inline styles after you finish typing, and see block styles when you type or after you press `Enter` key or focus to another paragraph. Just try to type some markdown in typora, and you would see how it works.
**Typora** uses the feature: *Live Preview*, meaning that you can see these inline styles after you finish typing, and see block styles when you type or after you press `Enter` key or focus on another paragraph. Just try to type some markdown in Typora, and you will see how it works.

**Note**: Markdown tags for inline styles, such as `**` will be hidden or displayed smartly. Markdown tags for block level styles, such as `###` or `- [x]` will be hidden once the block is rendered.
**Note**: Markdown tags for inline styles, such as `**` will be hidden or displayed smartly. Markdown tags for block-level styles, such as `###` or `- [x]` will be hidden once the block is rendered.

## Markdown For Typora

**Typora** is using [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/), For more detail, please open [Markdown Reference](/Markdown-Reference/).
**Typora** is using [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/), For more details, please open the [Markdown Reference](/Markdown-Reference/) guide.

To see full markdown Syntax references and extra usage, please check `Help`->`Markdown Reference` in menu bar.
To see full markdown Syntax references and extra usage, please check `Help`->`Markdown Reference` in the menu bar.

## Useful Shortcuts

For more shortcut keys and custom key bindings, you can refer [here](http://support.typora.io/Shortcut-Keys/).
For more shortcut keys and custom key bindings, you can refer [here](/Shortcut-Keys/).

## Files

### Open Quickly

The quick open panel can be popped up by pressing <kbd>Command+Shift+O</kbd> (*on macOS*) or <kbd>Ctrl+P</kbd> (*on Windows/Linux*), or click "Open Quickly" from `File` menu.

You could use fuzzy search to find & open files in current folder quickly.
You can use fuzzy search to find & open files in the current folder quickly.

### Open Folder

You could select a folder in the open file dialog popup from `File` → `Open` menu to open a folder in Typora. Actually you do not need to open folder explicitly in this way, when you open a file, its parent folder will be automatically loaded, you could check the folder from "Files Sidebar", which will be introduce below.
You can select a folder in the open file dialog popup from `File` → `Open` menu to open a folder in Typora. You do not need to open a folder explicitly in this way, when you open a file, its parent folder will be automatically loaded. You can find the folder in the "Files Sidebar."

### Files Sidebar

User can toggle sidebar from menubar or from titlebar on macOS and from status bar on Windows/Linux.
Users can toggle the sidebar from the menubar or from the title bar on macOS and from the status bar on Windows/Linux.

Typora has two types of sidebar:
Typora has three types of sidebar:

- Outline Panel (display *table of contents* of current document)
- File Tree (display loaded folder in tree hierarchy)
- File List (display files in loaded folder as lists)
1. Outline Panel (display *table of contents* of current document)
2. File Tree (display loaded folder in tree hierarchy)
3. File List (display files in loaded folder as lists)

In file tree mode, currently only folder and files that are supported by Typora (Markdown file, text file, etc) is displayed.
In file tree mode, currently, only folders and files that are supported by Typora (Markdown file, text file, etc.) are displayed.

### Global Search

You could click the "Search" icon on side panel on macOS or just scroll top on side panel on Windows/Linux version of Typora to show global search input. Or use hotkey <kbd>Command(Ctrl) + Shift + F</kbd> to open global search.
You could click the "Search" icon on the side panel on macOS or just scroll top on the side panel on the Windows/Linux version of Typora to show global search input. Or use hotkey <kbd>Command(Ctrl) + Shift + F</kbd> to open the global search.

## Outline

Mouse over the windows toolbar and click the outline icon on the right top of the window can open outline panel. This Panel can be pinned to left side.
Mouse over the Windows toolbar and click the outline icon on the right top of the window can open the outline panel. This Panel can be pinned to the left side.

## Word Count

Mouse over the windows toolbar will make word count visible. "Always show word count" can be set from preference panel. Click it will popup detailed word count tooltip. If a range of text is selected word count for selection will also be displayed on word count tooltip.
Moving the mouse over the Windows toolbar will make the word count visible. "Always show word count" can be set from the preference panel. Clicking it and the detailed word count tooltip will pop up. If a range of text is selected word count for selection will also be displayed on the word count tooltip.

## Copy

We create typora and want to make it your default markdown editor, thus copy and paste means copy from another app or paste to another app, instead of *copy/paste from/to another markdown editor*. Therefore, by default, `Copy` means `Copy As HTML` ( and `Paste` means `Paste from HTML`).
We created Typora and want to make it your default markdown editor, thus copy and paste means copy from another app or paste to another app, instead of *copy/paste from/to another markdown editor*. Therefore, by default, `Copy` means `Copy As HTML` ( and `Paste` means `Paste from HTML`).

However, after click "**Copy Markdown source by default**", typora will copy selected text in HTML/markdown format (When pasting, rich editors will accept the HTML format, while plain text / code editor will accept the markdown source code format).
However, after selecting "**Copy Markdown source by default**", Typora will copy selected text in HTML/markdown format (When pasting, rich editors will accept the HTML format, while plain text / code editor will accept the markdown source code format).

To **copy Markdown source code** explicitly, please use shortcut key `shift+cmd+c` or `Copy as Markdown` from menu. To **Copy as HTML Code**, please select `Copy as HTML Code` from menu.
To **copy Markdown source code** explicitly, please use the shortcut key `shift+cmd+c` or `Copy as Markdown` from the menu. To **Copy as HTML Code**, please select `Copy as HTML Code` from the menu.

## Smart Paste

**Typora** is able to analyze styles of the text content in your clipboard when pasting. For example, after pasting a `<h1>HEADING</h1>` from some website, typora will keep the 'first level heading’ format instead of paste ‘heading’ as plain text.
**Typora** can analyze styles of the text content in your clipboard when pasting. For example, after pasting a `<h1>HEADING</h1>` from some website, Typora will keep the 'first level heading’ format instead of paste ‘heading’ as plain text.

To **paste as markdown source** or plain text, you should use `paste as plain text` or press the shortcut key: `shift+cmd+v`.

## Themes

Please refer to `Help` → `Custom Themes` from menu bar.
Please refer to `Help` → `Custom Themes` from the menu bar.

## Publish

Currently Typora only support to export as **PDF** or **HTML**. More data format support as import/export will be integrated in future.
As of version 1.7, Typora supports the following export formats:

**File Formats**

- PDF
- HTML
- HTML (without styles)
- Image (.png)

**Application-specific**

Application-specific software requires Pandoc to be installed. Please read how to [Install and Use Pandoc](/Install-and-Use-Pandoc/).

- Word (.docx)
- OpenOffice
- RTF
- Epub
- LaTex
- Media Wiki
- reStructuredText
- Textile
- OPML

More data format support for import/export will be integrated in the future.

## Command Line Tool

Please see <https://support.typora.io/Use-Typora-From-Shell-or-cmd/>.
Please see [Use Typora from Shell or Cmd](/Use-Typora-From-Shell-or-cmd/).

## More Useful Tips & Documents

<https://support.typora.io/>

## And More ?
## And More?

For more questions or feedbacks, please contact us by:
For more questions or feedback, please contact us by:

- Home Page: http://typora.io
- Email: <[email protected]>
- Twitter [@typora](https://twitter.com/typora)

We opened a Github issue page in case you want to start a discussion or as an alternative way to report bugs/suggestions: https://github.com/typora/typora-issues/issues
We opened a Github issue page in case you want to start a discussion or as an alternative way to report bugs/suggestions: https://github.com/typora/typora-issues/issues
20 changes: 10 additions & 10 deletions _posts/basic/2016-09-26-About Themes.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,21 @@ typora-root-url: ../../

## Change Themes

Typora has 6 built-in themes, which can be selected using under the **Themes menu** in the menu bar. You can also download, install, modify or write your own custom theme to stylize Typora.
Typora has 6 built-in themes, which can be selected using under the **Themes menu** in the menu bar. You can also download, install, modify, or write your own custom theme to stylize Typora.

Typora uses CSS to style everything. Each theme shown in the Themes menu is one `.css` file under "Typora's theme folder". So you can add/modify themes by adding/modifying corresponding css files under "Typora's theme folder".
Typora uses CSS to style everything. Each theme shown in the Themes menu is one `.css` file under "Typora's theme folder". So you can add/modify themes by adding/modifying corresponding `.css` files under "Typora's theme folder".

## Use Themes Under Light Mode and Dark Mode

You can set separate themes for light mode and dark mode (on macOS / Windows). When the system’s color scheme changed, the corresponding theme you chose will be applied.
You can set separate themes for light mode and dark mode (on macOS / Windows). When the system’s color scheme changes, the corresponding theme you chose will be applied.

<img src="/media/new-97/Screen Shot 2020-12-05 at 17.01.49.png" alt="Screen Shot 2020-12-05 at 17.01.49" style="zoom:50%;" />

Your theme can also use media query for [prefers color scheme](https://developer.mozilla.org/docs/Web/CSS/@media/prefers-color-scheme) to write a responsive theme for both light mode and dark mode.

## Naming Rule

When writing your own theme, you need to use this file naming rule for theme css: do not use capitalized letters, and nonalphabet characters except `-`. Replace any whitespace with `-`, and Typora will convert them to a readable label in menu item. For example, for `my-first-typora-theme.css`, Typora will show “My First Typora Theme” under the “Themes” menu.
When writing your own theme, you need to use this file naming rule for theme CSS: do not use capitalized letters, and nonalphabet characters except `-`. Replace any whitespace with `-`, and Typora will convert them to a readable label in its menu item. For example, for `my-first-typora-theme.css`, Typora will show “My First Typora Theme” under the “Themes” menu.

## Get Typora Themes

Expand All @@ -37,27 +37,27 @@ We have an official website [Typora Theme Gallery](http://theme.typora.io) for d

1. Open Theme Folder. (see instructions below)
2. Copy or move `.css` file and related resources, like fonts or images, into the newly opened folder.
3. Restart Typora, then select it from `Themes` menu.
3. Restart Typora, then select it from the `Themes` menu.

## Open Theme Folder

### macOS

Open the preference panel and click "Open Theme Folder" button.
Open the preference panel and click the "Open Theme Folder" button.

![typora-preference-mac](/media/about-themes/Snip20160921_1.png)

On macOS, usually it is `/Users/{username}/Library/Application Support/abnerworks.Typora/themes/`.
On macOS, usually, it is `/Users/{username}/Library/Application Support/abnerworks.Typora/themes/`.

### Windows/Linux

Open preference panel from `File` → `Preference` from menubar, then click "Open Theme Folder":
Open the Preferences panel from `File` → `Preferences...` from the menu bar, select "Appearance", then click "Open Theme Folder":

![typora-preference-electron](/media/about-themes/Snip20160921_2.png)

## Modify Current Styles

Sometimes you may just want to change font family for all themes, or change font color for headings for specific themes. In this case, you do not need to copy/modify a whole exiting css file, instead [Add Custom CSS](/Add-Custom-CSS/) is enough.
Sometimes you may just want to change the font family for all themes or change the font color for headings for specific themes. In this case, you do not need to copy/modify an existing `.css` file, instead [Add Custom CSS](/Add-Custom-CSS/) is enough.

## Writing My Own Theme

Expand All @@ -67,5 +67,5 @@ Please see [Write Custom Theme for Typora](http://theme.typora.io/doc/Write-Cust

You can open Chrome/Safari DevTools to debug element styles.

- On macOS, you could check `Help` -> `Enable Debug` menu item, then right click anywhere in Typora's hybrid edit view, then click "Inspect Elements" from context menu.
- On macOS, you could check `Help` -> `Enable Debug` menu item, then right-click anywhere in Typora's hybrid edit view, then click "Inspect Elements" from the context menu.
- On Windows/Linux, you could open DevTools from `View` -> `Toggle DevTools` menu item.
Loading