feat(docs): add Tips (#60)

* feat: add Tips

* style: use <kbd> for shortcuts

* fix: fix header level

* feat(tips): add tips for handling SIGINT and SIGHUP

* fix: use "UNIX-like" instead of "Linux-like"

* feat: try restarting CP Editor after changing the UI style

content/en/docs/Preferences/Appearance.md

@@ -15,6 +15,8 @@ The "default" style is either the most appropriate style on your platform, or th
 
 On Windows, there's an extra option "Auto Fusion". "Auto Fusion" is either dark or light depending on the system theme (i.e. whether the Windows application theme is dark or light).
 
+If there's anything wrong after you change the UI style, you can try restarting CP Editor.
+
 ### Editor Theme
 
 The syntax highlighting theme for the code editor.
@@ -53,7 +55,7 @@ Use "¶" to visualize the end-of-line in the diff viewer. It is useful if you wa
 
 Add an extra margin at the bottom of the code editor, so that you can scroll less.
 
-Due to technical reasons, it could slightly affect the operation history, i.e. you might be able undo the margin change by `Ctrl+Z`.
+Due to technical reasons, it could slightly affect the operation history, i.e. you might be able undo the margin change by <kbd>Ctrl+Z</kbd>.
 
 ### Custom Application Font
 

content/en/docs/Preferences/Extensions.md

@@ -5,7 +5,7 @@ weight: 50
 
 ## Clang Format
 
-Clang Format is used to format the C++ codes. You can click Actions->Format Code or press the shortcut `Ctrl+Shift+I` to format the codes. If you have selected a part of the code, only the selection (and its necessary adjacent codes) will be formatted.
+Clang Format is used to format the C++ codes. You can click Actions->Format Code or press the shortcut <kbd>Ctrl+Shift+I</kbd> to format the codes. If you have selected a part of the code, only the selection (and its necessary adjacent codes) will be formatted.
 
 **See also** [Setup Clang Format](../../setup#setup-clang-format).
 

content/en/docs/Preferences/Language.md

@@ -128,13 +128,13 @@ Then you can use `int main` as the regex, `end` as the offset type, and `9` as t
 
 ### Manage Snippets
 
-You can add/delete/rename snippets in "Language->XXX->XXX Snippet". You can use `Ctrl+N` for "Add", `Ctrl+W` for "Del" and `F2` for "Rename".
+You can add/delete/rename snippets in "Language->XXX->XXX Snippet". You can use <kbd>Ctrl+N</kbd> for "Add", </kbd>Ctrl+W</kbd> for "Del" and </kbd>F2</kbd> for "Rename".
 
 You can also import snippets from files or extract your snippets to files in the "More" menu in the snippet page.
 
 ### Use Snippets
 
-You can insert a snippet into the code editor by either clicking "Actions->Use Snippets" or pressing `Ctrl+T`.
+You can insert a snippet into the code editor by either clicking "Actions->Use Snippets" or pressing </kbd>Ctrl+T</kbd>.
 
 When choosing a snippet, you can enter the first few characters of the snippet name, and it will be auto-completed.
 

content/en/docs/Preferences/_index.md

@@ -5,6 +5,6 @@ weight: 40
 description: What do the preferences mean and how to set them
 ---
 
-You can set the preferences by either clicking Options->Preferences or pressing `Ctrl+P`.
+You can set the preferences by either clicking Options->Preferences or pressing <kbd>Ctrl+P</kbd>.
 
 You can hover over the settings to see the tooltips. Usually, the tooltips are clear enough, but if you want a more detailed explaination, you can read the documentation.

content/en/docs/Tips/_index.md

@@ -0,0 +1,49 @@
+---
+title: "Tips"
+weight: 50
+description: Some tips that may help
+---
+
+## Shortcuts in the Preferences Window
+
+You can use <kbd>Ctlr+D</kbd>, <kbd>Ctrl+R</kbd> and <kbd>Ctrl+S</kbd> for "Default", "Reset" and "Apply" respectively.
+
+You can use <kbd>Ctlr+Tab</kbd> and <kbd>Ctlr+Shift+Tab</kbd> to go through the preferences pages.
+
+## Editor Shortcuts
+
+Besides the shortcuts in the menu, you can use the [Read-only Key Bindings](https://doc.qt.io/qt-5/qtextedit.html#read-only-key-bindings) and the [Editing Key Bindings](https://doc.qt.io/qt-5/qtextedit.html#editing-key-bindings). There are also some hidden shortcuts: <kbd>Tab</kbd> (when there's a selection) and <kbd>Shift+Tab</kbd> for indent and unindent, <kbd>Ctrl+Enter</kbd> and <kbd>Ctrl+Shift+Enter</kbd> for inserting line after and before, <kbd>Shift+Delete</kbd> for deleting the current line.
+
+## Drag and Drop
+
+You can drag files and drop them into the main editor or the input/expected part of test cases.
+
+## Tabs
+
+You can use <kbd>Ctrl+Tab</kbd> and <kbd>Ctrl+Shift+Tab</kbd> to switch to the next/previous tab.
+
+You can right-click on the tabs to get a useful context menu. The content of the menu is based on whether this tab is untitled or not, has problem URL or not, etc.
+
+## Test Cases
+
+Testlib checkers are compiled when changing the checker or changing the preferences, so you may have to wait for it after the execution is finished.
+
+You can load test cases from files, edit testcases in bigger windows and save a test case in a file in the right-click menu of the test cases.
+
+You can click the verdict to open the diff viewer.
+
+## View mode
+
+The view mode is helpful to focus on your codes, investigate the outputs and errors, or make the editor narrower so that you can split your screen into two parts.
+
+You can set a hotkey for switching view modes in Preferences.
+
+## Launch CP Editor in the command line
+
+CP Editor supports some command-line options, run `cpeditor --help` for more information.
+
+On Windows, it's better to use UNIX-like shells like git bash.
+
+In the command line, you can open a non-existing file as a tab by `cpeditor <path>` (and you can save to this path later), open all C++ files in a directory recursively by `cpeditor --cpp <directory>` or temporarily disable [Restore last session at startup](../preferences/actions#restore-last-session-at-startup) by `cpeditor --no-hot-exit`.
+
+CP Editor normally closes when receiving SIGINT and SIGHUP, so if you start CP Editor in the command line, you can safely press <kbd>Ctrl+C</kbd> to quit.