code block formatting broken

[sbts]

triple backtick codeblockes no longer behave cleanly. The used to sit inside a div with changed background color and a copy content button. They now only seem to have the text background color changed. And otherwise behave like ordinary text. This is an issue for riot web and android at a minimum

[kronos003]

I note the same as above. Tested on Fedora 25 against Firefox 61.0.1 and Google Chrome Version 67.0.3396.99 (Official Build) (64-bit)

[lampholder]

This will likely be a consequence of our migration to slate.js.

I'll dig up some examples of the difference.

[lampholder]

Old version

Event:

{
  "origin_server_ts": 1534179532478,
  "sender": "@toml:matrix.org",
  "event_id": "$1534179532889966mcYAG:matrix.org",
  "unsigned": {
    "age": 3381,
    "transaction_id": "m1534179533095.6"
  },
  "content": {
    "body": "```python\ndef foo(bar):\n    return bar + 5\n```",
    "msgtype": "m.text",
    "formatted_body": "<pre><code class=\"language-python\">def foo(bar):\n    return bar + 5\n</code></pre>\n",
    "format": "org.matrix.custom.html"
  },
  "type": "m.room.message",
  "room_id": "!KbQDDYgRYgoyAWughj:lant.uk"
}

HTML:

<span class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body markdown-body" dir="auto"><pre><code class="language-python hljs"><span class="hljs-function"><span class="hljs-keyword">def</span> <span class="hljs-title">foo</span>
<span
    class="hljs-params">(bar)</span>:</span>
    <span class="hljs-keyword">return</span> bar + <span class="hljs-number">5</span>
    </code><span class="mx_EventTile_copyButton"></span></pre>
    </span>
    </span>

## New version


Event:

{
  "origin_server_ts": 1534179848023,
  "sender": "@isobelle.mtp:matrix.org",
  "event_id": "$1534179848891231tvLdZ:matrix.org",
  "unsigned": {
    "age": 7304,
    "transaction_id": "m1534179848665.55"
  },
  "content": {
    "body": "```python\ndef foo(bar):\n    return bar + 5\n```",
    "msgtype": "m.text",
    "formatted_body": "<pre><code class=\"language-python\">def foo(bar):\n    return bar + 5\n</code></pre>\n",
    "format": "org.matrix.custom.html"
  },
  "type": "m.room.message",
  "room_id": "!SkUqMWMqHDDkUEQBwe:matrix.org"
}

HTML:

<span class="mx_MTextBody mx_EventTile_content"><span class="mx_EventTile_body markdown-body" dir="auto"><div class="mx_EventTile_pre_container"><pre><code class="language-python hljs"><span class="hljs-function"><span class="hljs-keyword">def</span><span class="hljs-title">foo</span><span class="hljs-params">(bar)</span>:</span>
<span class="hljs-keyword">return</span> bar + <span class="hljs-number">5</span>
</code>
</pre><span class="mx_EventTile_copyButton"></span></div>
</span>
</span>

[t3chguy]

If you mean via the rich text editor buttons then this is intentional, it's no longer a code block button and instead an inline code block. But nothing has changed on the md side for the triple backticks so weird

[lampholder]

So cosmetically I can't seem any difference here (in Riot web at least).

The old and new event bodies look the same, too:
Old:

    "body": "```python\ndef foo(bar):\n    return bar + 5\n```",
    "formatted_body": "<pre><code class=\"language-python\">def foo(bar):\n    return bar + 5\n</code></pre>\n",

New:

    "body": "```python\ndef foo(bar):\n    return bar + 5\n```",
    "formatted_body": "<pre><code class=\"language-python\">def foo(bar):\n    return bar + 5\n</code></pre>\n",

There is a difference in the HTML, though I haven't inspected that closely.

@sbts or @kronos003 - does that match what you were seeing?

[linuxmail]

hi,

have also the same problem: I posted a snippset and on Riot (Fedora 28) it wasn't "visible"

I used ``` as I used before .... but ...

"content": {
    "body": "```url=\"mongodb://fc-r02-mongodb-01.example.com:27035,fc-r02-mongodb-02.example.com:27035,fc-r02-mongodb-03.example.com:27035,qh-a07-mongodb-01.example.com:27035,qh-a07-mongodb-02.example.com:27035,qh-a07-mongodb-03.example.com:27035\"\n```\n",
    "msgtype": "m.text",
    "formatted_body": "<pre><code class=\"language-url=&quot;mongodb://fc-r02-mongodb-01.example.com:27035,fc-r02-mongodb-02.example.com:27035,fc-r02-mongodb-03.example.com:27035,qh-a07-mongodb-01.example.com:27035,qh-a07-mongodb-02.example.com:27035,qh-a07-mongodb-03.example.com:27035&quot;\"></code></pre>\n",
    "format": "org.matrix.custom.html"
  },

I tried to use "inline code" from the RTE, but that is more broken.

[triclops200]

This is still broken on android: no newlines are preserved and there is no syntax highlighting.

[t3chguy]

@triclops200 as the name of this repo suggests, this is riot-web, you might want https://github.com/vector-im/riot-android

[triclops200]

😳 my bad. Totally missed that.

[t3chguy]

Is this still an issue for you in the new composer?

[linuxmail]

hi,
I have to say, that wasn't a problem anymore. From my side it can closed.

[Taha-Firoz]

Triple back ticks are working on the android app