diff --git a/docs/KEYBINDINGS.md b/docs/KEYBINDINGS.md
index da425498..f7b49e23 100644
--- a/docs/KEYBINDINGS.md
+++ b/docs/KEYBINDINGS.md
@@ -110,6 +110,7 @@ Here is an example:
| `formatStrong` | CmdOrCtrl+B | Set the font of the selected text to bold |
| `formatEmphasis` | CmdOrCtrl+I | Set the font of the selected text to italic |
| `formatUnderline` | CmdOrCtrl+U | Change the selected text to underline |
+| `highlight` | CmdOrCtrl+Shift+H | Highlight the selected text by tag |
| `formatInlineCode` | CmdOrCtrl+` | Change the selected text to inline code |
| `formatInlineMath` | CmdOrCtrl+Shift+M | Change the selected text to inline math |
| `formatStrike` | CmdOrCtrl+D | Strike through the selected text |
diff --git a/src/main/keyboard/shortcutHandler.js b/src/main/keyboard/shortcutHandler.js
index 5fa4db99..2c8fc5a9 100644
--- a/src/main/keyboard/shortcutHandler.js
+++ b/src/main/keyboard/shortcutHandler.js
@@ -84,6 +84,7 @@ class Keybindings {
['formatStrong', 'CmdOrCtrl+B'],
['formatEmphasis', 'CmdOrCtrl+I'],
['formatUnderline', 'CmdOrCtrl+U'],
+ ['highlight', 'Shift+CmdOrCtrl+H'],
['formatInlineCode', 'CmdOrCtrl+`'],
['formatInlineMath', 'Shift+CmdOrCtrl+M'],
['formatStrike', 'CmdOrCtrl+D'],
diff --git a/src/main/menu/templates/format.js b/src/main/menu/templates/format.js
index be65ad3d..fddd1718 100644
--- a/src/main/menu/templates/format.js
+++ b/src/main/menu/templates/format.js
@@ -44,6 +44,14 @@ export default function (keybindings) {
click (menuItem, browserWindow) {
actions.format(browserWindow, 'sub')
}
+ }, {
+ id: 'highlightMenuItem',
+ label: 'Highlight',
+ type: 'checkbox',
+ accelerator: keybindings.getAccelerator('highlight'),
+ click (menuItem, browserWindow) {
+ actions.format(browserWindow, 'mark')
+ }
}, {
type: 'separator'
}, {
diff --git a/src/muya/lib/assets/styles/index.css b/src/muya/lib/assets/styles/index.css
index 2bc5ff32..c8d11b02 100644
--- a/src/muya/lib/assets/styles/index.css
+++ b/src/muya/lib/assets/styles/index.css
@@ -1,9 +1,12 @@
-html {
- -webkit-font-smoothing: antialiased;
-}
-
-pre {
- -webkit-font-smoothing: auto;
+@keyframes loading {
+ 0% {
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ }
+ 100% {
+ -webkit-transform: rotate(360deg);
+ transform: rotate(360deg);
+ }
}
@keyframes highlight {
@@ -18,15 +21,37 @@ pre {
}
}
-@keyframes loading {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
+html {
+ -webkit-font-smoothing: antialiased;
+}
+
+pre {
+ -webkit-font-smoothing: auto;
+}
+
+mark {
+ display: inline-block;
+ height: 1.2em;
+ line-height: 1.2;
+}
+
+mark::before,
+mark::after {
+ clip-path: inset(100%);
+ clip: rect(1px, 1px, 1px, 1px);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+mark::before {
+ content: " [highlight start] ";
+}
+
+mark::after {
+ content: " [highlight end] ";
}
#ag-editor-id summary {
diff --git a/src/muya/lib/config/index.js b/src/muya/lib/config/index.js
index 34f66ce0..8112c98c 100644
--- a/src/muya/lib/config/index.js
+++ b/src/muya/lib/config/index.js
@@ -206,6 +206,10 @@ export const FORMAT_MARKER_MAP = {
sup: {
open: '',
close: ''
+ },
+ mark: {
+ open: '',
+ close: ''
}
}
diff --git a/src/muya/lib/contentState/formatCtrl.js b/src/muya/lib/contentState/formatCtrl.js
index c94390e5..5027138d 100644
--- a/src/muya/lib/contentState/formatCtrl.js
+++ b/src/muya/lib/contentState/formatCtrl.js
@@ -104,6 +104,7 @@ const addFormat = (type, block, { start, end }) => {
}
case 'sub':
case 'sup':
+ case 'mark':
case 'u': {
const MARKER = FORMAT_MARKER_MAP[type]
const oldText = block.text
@@ -133,7 +134,7 @@ const addFormat = (type, block, { start, end }) => {
const checkTokenIsInlineFormat = token => {
const { type, tag } = token
if (FORMAT_TYPES.includes(type)) return true
- if (type === 'html_tag' && /^(?:u|sub|sup)$/i.test(tag)) return true
+ if (type === 'html_tag' && /^(?:u|sub|sup|mark)$/i.test(tag)) return true
return false
}