Summary
This report summarizes my second week of work on the "mobile editor improvements" GSoC project.
Over the past week
This week I plan to
Fix the lack of alt
text for some buttons in the mobile app (e.g. back button, edit note button)
Make the mobile editor do syntax highlighting
in math environments
in embedded code blocks (only using languages provided by the base lezer
organization ).
Add "insert image" and "add link" buttons to the toolbar.
Finalize the design of the toolbar.
6 Likes
I think we should support the same set of languages as the desktop app to avoid any dispairity beween the two (although the rendered html does seem to support significantly more than the editor currently).
const topLanguages = [
'python',
'clike',
'javascript',
'jsx',
'php',
'r',
'swift',
'go',
'vb',
'vbscript',
'ruby',
'rust',
'dart',
'lua',
'groovy',
'perl',
'cobol',
'julia',
'haskell',
This file has been truncated. show original
// Here we replicate what's being done in highlight.js/index.js by default,
// except that we exclude a number of very large, but not very useful languages
// (those commented out).
//
// https://github.com/highlightjs/highlight.js/issues/1257#issuecomment-254502834
const hljs = require('highlight.js/lib/core');
// hljs.registerLanguage('1c', require('highlight.js/lib/languages/1c'));
hljs.registerLanguage('abnf', require('highlight.js/lib/languages/abnf'));
hljs.registerLanguage('accesslog', require('highlight.js/lib/languages/accesslog'));
hljs.registerLanguage('actionscript', require('highlight.js/lib/languages/actionscript'));
hljs.registerLanguage('ada', require('highlight.js/lib/languages/ada'));
hljs.registerLanguage('angelscript', require('highlight.js/lib/languages/angelscript'));
hljs.registerLanguage('apache', require('highlight.js/lib/languages/apache'));
hljs.registerLanguage('applescript', require('highlight.js/lib/languages/applescript'));
hljs.registerLanguage('arcade', require('highlight.js/lib/languages/arcade'));
hljs.registerLanguage('arduino', require('highlight.js/lib/languages/arduino'));
hljs.registerLanguage('armasm', require('highlight.js/lib/languages/armasm'));
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
This file has been truncated. show original
2 Likes
I've opened a PR with this:
laurent22:dev
← personalizedrefrigerator:pr/languageSupportRebased
opened 07:24AM - 24 Jun 22 UTC
<!--
Please prefix the title with the platform you are targetting:
Here ar… e some examples of good titles:
- Desktop: Resolves #123: Added new setting to change font
- Mobile, Desktop: Fixes #456: Fixed config screen error
- All: Resolves #777: Made synchronisation faster
And here's an explanation of the title format:
- "Desktop" for the Windows/macOS/Linux app (Electron app)
- "Mobile" for the mobile app (or "Android" / "iOS" if the pull request only applies to one of the mobile platforms)
- "CLI" for the CLI app
If it's two platforms, separate them with commas - "Desktop, Mobile" or if it's for all platforms, prefix with "All".
If it's not related to any platform (such as a translation, change to the documentation, etc.), simply don't add a platform.
Then please append the issue that you've addressed or fixed. Use "Resolves #123" for new features or improvements and "Fixes #123" for bug fixes.
AND PLEASE READ THE GUIDE: https://github.com/laurent22/joplin/blob/dev/CONTRIBUTING.md
-->
# Summary
* Follow up to [this comment in the week 2 GSoC report](https://discourse.joplinapp.org/t/week-2-report/26130/2?u=personalizedrefriger).
# Screenshot


# Testing
The text used in the screenshot is the following:
<details><summary>Text used in screenshot</summary>
````markdown
# Summary
* The goal of this note is to demonstrate $\TeX$, `code`, and _other_ styling in the beta editor.
# $\TeX$ Highlighting
As can be seen, $\text{both numbers (e.g. 0, 1, 2)}$ and commands are highlighted. The highlighter uses [lezer](https://lezer.codemirror.net) to do parsing (it's the backend that CodeMirror 6 uses).
The math highlighting supports both inline and block math. For example,
> The Cauchy integral theorem states that, given some $z \in \mathbb{C}$ and $r \in \mathbb{R}_{\geq 0}$,
> if $f : \mathbb{C} \to \mathbb{C}$ is analytic in $B_r(z_0)$, then,
> $$
> f(z) = \oint_{\partial B_r(z_0)} \frac{f(w)}{(w - z)^{n+1}} dw
> $$
Testing escaped: $\$$. It works!
$$
% As a result of syntax highlighting, comments are also styled.
\text{\TeX works inside and outside of block quotes.}
$$
$$ 3 + 3 \neq 7 $$
$3+3 = 6$
# `Code` highlighting
```html
<h1>Code highlighting</h1>
<p>This is an example of highlighted HTML.</p>
$$
\TeX isn't highlighted in HTML blocks.
$$
```
```
Code with no language.
```
```js
"use strict";
(function() {
alert("Testing!");
})();
```
````
</details>
Does this PR check the state of the markdown.plugin.katex
setting?
I think that if this is off then syntax highlighting for Katex blocks shouldn't show when it could be unintended, especially as it isn't "standard" markdown.
I didn't know that setting existed! I'll update the PR.
2 Likes
Daeraxa:
markdown.plugin.katex
That's done! Thank you for catching this!