Article image
Article image

For Mac OS users

Make your MAC keyboard work on Medium and others editors without dead keys issues

This is why Medium editor is getting buggy for French guys like me writing tech articles but also on other Markdown-based editors.

Andréas Hanss
Dec 4, 2019 · 5 min read

👋🏻 Hello, I’m Andréas and I’m a French Javascript Tech lead for a couple of years. I’m also a tech blogger and I would like to share one issue I’m encountering when writing articles on Medium. Especially related to code.

For a couple of months, I’m experiencing a strange issue on Medium’s based editors such as the one from Ghost or the Medium one itself.

Here are two simple GIFs to demonstrate the issue. If you have a 🇫🇷 French keyboard, you might also be experiencing this.

After some research, I figured out this is due to something called Dead keys.

🦇 The Dead key issue within Medium editor

Here is a small representation of the bug, but you might see other strange behaviors impacting the general layout of the article page.

Buggy dead keys
Buggy dead keys
Broken Highlight: I’m just highlighting and pressing the back-tick char

✅ How is it supposed to works when you highlight something using the back-tick (`) character.

Working example
Working example
Good highlight: I’m just highlighting and pressing the back-tick char

It can be pretty annoying when you’re writing a lot of code like me, especially if you’re a programmer and want to leverage code highlight blocks.

const a = "some text";
const b = `backtick string of ${a}`;

So let’s see in detail what’s the issue and what can we do about it. Don’t worry it can be fixed up pretty easy.

❓What is a « Dead key » on a computer keyboard?

A dead key is a special kind of a modifier key on a mechanical typewriter, or computer keyboard, that is typically used to attach a specific diacritic to a base letter. The dead key does not generate a (complete) character by itself, but modifies the character generated by the key struck immediately after.

All-rights, Great!

What’s happening is that the first time you press ` the input is waiting for another character to be pressed.

While this can be great for 🇫🇷 French 🥖 keyboards to generate characters such as those which are pretty common in the Frenchy words è, ê, â, à. This is annoying when you need to do coding or highlighting especially in English.

Generally, you press space to just print the back-tick character but there in Medium editor: it just replace the whole highlight by the character.

This is not the behavior we expect to be and this is kind of a bug from the editor but we have a solution to fix this.

Note: Just to be clear, dead keys are not in fact bugs by themselves, but they don’t work very well in some circumstances. This is the case with the Medium editor. I encourage to keep both keyboard layout and adapt according to the situation by switching.

⚡️Resolve the dead key issue on Mac OS

  1. We are going to use a small software called Ukulele. This software will help us override some keys on the keyboard by creating a custom profile.
  2. Once this was done, we will be able to switch whenever we want between the two keyboards layouts. That way, if we want to access the old behavior with dead keys this would be possible.

🎻 Configuring Ukulele

Launch it and you end up with that, or something like this:

Keyboard layout
Keyboard layout

Close this keyboard without saving and click File -> New from current input source.

You’ll get a new keyboard layout with your current configuration we are going to override.

This gives us a new keyboard bundle we are going to configure.

Input options
Input options

Here you can see two columns:

  1. Keyboard Layouts
  2. Localisations

The only keyboard layout we have is the one we just cloned. Just right click on it and use Set keyboard name and script to give it whatever name you want to. I named mine French — No dead keys.

Once done, heads to Localisations tab and add fr to the list, also feel free to remove en. This is the folder where our layout is going to be sorted. It’s pretty straightforward, I won’t develop much more.

Now go back to Keyboard Layouts and double-click on the Keyboard layout we just renamed.

If you have Dead Keys activated just like me you’ll see two red boxes like me here.

Layout with dead keys
Layout with dead keys

So double click on them and just Change to output them.

Change keyboard style image
Change keyboard style image

Now save your bundle and drop it in the ~/Library/Keyboard Layouts folder.

To do that quickly: Open Finder -> Go -> Go to folder and paste some parts of the full path I just gave.

Keyboard bundles folder
Keyboard bundles folder

Now we are going to activate our new keyboard!

Open System Settings and click Keyboards

System setup screen
System setup screen

In Input sources you should see the + button, head to fr or any localisations you have chosen in the previous step and you must see your keyboard we named before.

Input source screen
Input source screen

You can also check Show Input menu in menu bar to quickly access your keyboard layout in the system bar at the top right part of the screen.

Here we are! I hope it can help!

Working example
Working example
It works

JavaScript in Plain English

Learn the web's most important programming language.

Andréas Hanss

Written by

👨🏻‍💻Javascript Tech leads @ Kaliop 🇫🇷 — react | react-native | modern js |🔥 Firebase — https://modern-javascript.fr. Passionnated about learning.

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade