This report summarizes my second week of work on the "mobile editor improvements" GSoC project.
 
 
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', 
       
    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'));
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 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!