MakeupLiveFormat - Website to highlight elixir code

I tried it and thee is a bit annoying bug with double newlines (only in rendered) which appear on any input (even if I just press space at end of default input). Can you please fix it?

image1223×880 23.3 KB

Hmmm, I’m not able to reproduce that, what browser are you using?

Vivaldi - Chromium-based

image1222×880 51.5 KB

EDIT: Looks like my browser handles white-space style in different way than yours.

For me all values except initial, normal and nowrap adds extra newline-like CSS behaviour. Also initial, normal, nowrap and pre-line have CSS behaviour which looks like it remove spaces at start of line.

Hmmm, so what type of styling would you need to get the same behavior that other browsers have?

Sorry, I just found it’s not that. I have compared a default HTML with generated one and see extra span with class err - no idea why.

This is how it looks like by default:

<pre class="highlight"><code><span class="kd">defmodule</span><span class="w"> </span><span class="nc">ExampleModule</span><span class="w">
  </span><span class="kd">def</span><span class="w"> </span><span class="nf">hello</span><span class="w"> </span><span class="k" data-group-id="6243670888-1">do</span><span class="w">
    </span><span class="nc">IO</span><span class="o">.</span><span class="n">puts</span><span class="p" data-group-id="6243670888-2">(</span><span class="s">"Hello World"</span><span class="p" data-group-id="6243670888-2">)</span><span class="w">
  </span><span class="k" data-group-id="6243670888-1">end</span><span class="w">
</span><span class="k">end</span><span class="w">
</span></code></pre>

and here it’s how I cut and paste exactly same code:

<pre class="highlight"><code><span class="kd">defmodule</span><span class="w"> </span><span class="nc">ExampleModule</span><span class="err">
</span><span class="w">
  </span><span class="kd">def</span><span class="w"> </span><span class="nf">hello</span><span class="w"> </span><span class="k" data-group-id="5326747296-1">do</span><span class="err">
</span><span class="w">
    </span><span class="nc">IO</span><span class="o">.</span><span class="n">puts</span><span class="p" data-group-id="5326747296-2">(</span><span class="s">"Hello World"</span><span class="p" data-group-id="5326747296-2">)</span><span class="err">
</span><span class="w">
  </span><span class="k" data-group-id="5326747296-1">end</span><span class="err">
</span><span class="w">
</span><span class="k">end</span><span class="err">
</span><span class="w">
</span></code></pre>

Those span contains one newline character. When I remove that extra span, it’s contents or just set display to none then the code looks as expected.

Ok, I found why that extra span is generated! I suggest you to inspect text which comes from socket.

This is default inspected:

“defmodule ExampleModule\n def hello do\n IO.puts("Hello World")\n end\nend\n”

And here is the one from socket:

“defmodule ExampleModule\r\n def hello do\r\n IO.puts("Hello World")\r\n end\r\nend\r\n”

Nasty…

This is not a Bug in this application. It actually exposes a bug in the Elixir lexer, which is that the \r character from windows line endings isn’t matched by the lexer. When used on windows, Elixir seems to conver \n\r into \n, but when used somewhere else it doesn’t. The problem is probably that @Eiji (and me) are sending strings from Windows which are parsed with Elixir running on a Unix system. That way, the \r character is flagged as an error (which generates the extra span tags - very annoying).

The fix seems pretty obvious, the problem is that I’m not sure on how to test it in a portable way.

Pretty funny, but I’m not even using Windows. I’m on openSUSE Tumbleweed. Did something strange happen in Linux world last time?

$ uname -a
Linux install 5.3.12-2-default #1 SMP Thu Nov 21 07:21:43 UTC 2019 (a6f6081) x86_64 x86_64 x86_64 GNU/Linux

$ cat /etc/os-release 
NAME="openSUSE Tumbleweed"
# VERSION="20191231"
ID="opensuse-tumbleweed"
ID_LIKE="opensuse suse"
VERSION_ID="20191231"
PRETTY_NAME="openSUSE Tumbleweed"
ANSI_COLOR="0;32"
CPE_NAME="cpe:/o:opensuse:tumbleweed:20191231"
BUG_REPORT_URL="https://bugs.opensuse.org"
HOME_URL="https://www.opensuse.org/"
LOGO="distributor-logo"

$ cat /proc/version
Linux version 5.3.12-2-default (geeko@buildhost) (gcc version 9.2.1 20190903 [gcc-9-branch revision 275330] (SUSE Linux)) #1 SMP Thu Nov 21 07:21:43 UTC 2019 (a6f6081)

@axelson I have send 3 small pull requests. One of them is a simple fix to replace that newlines.

@axelson I just wanted to say that I wholeheartedly approve of this demo xD I’ve meant to write something like it for a while, but I never made the time for it.

I wonder if there could be a way for the user to tag code as “looking wrong”, which would cause an email to be sent somewhere (or maybe a bot that creates a GitHub issue in the lexer’s repo?) I can see this being abused though… Maybe if it were protected by a captcha?

Even though you’re using linux, it seems like your browser is sending windows-style strings through the websocket… Is that some kind of web standard in which JS treats all strings as being windows-style? I have to look into it

I’m not sure such a fix would be a good idea. I think the Elixir lexer should be handing this input correctly, that is, it should recognize the \n\r sequence as whitespace. Unless there is something in the Elixir “standard” that says that the compiler is not meant to accept strings with windows-style endings… Is there?