Code (blocks) improvements

Developer help
1

Hi,

I’m having issues with inline code in ghost.

Inline code seems not to be recognized at all using the code syntax. The keyboard shortcut (Ctrl/⌘ + Shift + K) seems also not to work, bringing up the Link dialog on my mac in Firefox? (Using the Editor in Ghost - FAQ)

Inline code and code blocks are also not available from the context menu if text is selected? That would’ve helped and would be nice and consistent.

And yes, better syntax highlighting would be nice. The prism.js approach seems not to work very well here.

Thanks for improving.

PS: On Ghost Pro so likely not a ghost setup issue.

2

I have to add that sometimes using ` in posts destroys the existing code block formatting in posts and changes it to inline code. This is weird and has then to be cumbersomely changed back manually to code blocks.

I think there are definitely a few things wrong with inline code and code block formatting… :frowning:

Edit:
@Ghost.org Where should I report such things if not here?

3

Are you using a non-English keyboard layout?

4

Hi Kevin, yes I do. That can be an explanation for the keyboard shortcut difficulties but everything else should still work, shouldn’t it?

5

It’s mostly based on key events rather than the contents so certain keyboard layouts with dead keys for characters used in the text expansions can cause problems.

I’ve tested everything you’ve reported using Firefox on Mac using an en keyboard layout and haven’t been able to reproduce :thinking: Do you have the same issues in other browsers or when you have all extensions disabled?

Syntax highlighting is predominantly a theme-level concern, you can change it to work however you like when displaying code on your site :slight_smile:

Ghost itself is not a code editor and it’s a niche application for Ghost’s user base so syntax highlighting support is minimal, using the base highlighting provided by the CodeMirror editor not prism.js. For the most-used languages the syntax highlighting will adjust based on the language specified in the code card.

6

Just tested in Safari:

  1. The Keyboard shortcut for inline code formatting works :white_check_mark:
  2. Formatting text as inline code with back-ticks does also not work :x:
  3. Creating code blocks with 3 back-ticks sometimes works and sometimes ends up with just displaying 4 back-ticks. That works better in FF. :wavy_dash:

Keyboard Layout is swiss german.

7

There are issues with German keyboards because the backtick is behind a dead key. Some attempts have been made to fix it but browsers don’t (or didn’t) expose the events in question very cleanly so it’s a bit hacky, works differently across browsers/OS, and the behaviour may have changed since the fix was implemented.

Issues:

8

One thing that could help with diagnosis/potential fix would be a screenshot of the output from this keyboard event viewer when you type a backtick followed by a space (edit: plus two consecutive backticks as a separate screenshot)

9

Tbh I don’t even mind so much that Keyboard Shortcuts or Text formatting doesn’t work.

It would be enough if I could reliably use it from the context menu when selecting text. But that functionality is currently absent.

Firefox on mac

FF
FF2414×1024 296 KB

Safari

Safari
Safari2468×1182 363 KB

10

2 backticks

FF

FF2
FF22406×1270 380 KB

Safari

safari2
safari22454×1426 447 KB