Add line number in code editor

[ad-ops]

For longer examples or when user pastes their own code and get and error or warning it would be helpful to be able to use the line number provided by the compiler.

For example from the first example on https://tour.gleam.run/basics/hello-world/:

import gleam/io

pub fn main() {
  io.println(4)
}

error: Type mismatch
  ┌─ /src/main.gleam:4:14
  │
4 │   io.println(4)
  │              ^

Expected type:

    String

Found type:

    Int

[lpil]

Sorry, what do you mean? The line number is in the error there

[ad-ops]

sorry, I meant the editor and that it would be helpful since it is in the error message:

Should be something like this:

or perhaps add an option to show it if it is to distracting in the tour.

[lpil]

Ah I see! The editor we're using doesn't support this I believe. If we add it we'd need to have it be an opt-in feature and we'll need some visual design to work out where to put this config, so it's not a straightforward addition.

[samifouad]

i was able to do some playing around in chrome devtools and found out where we would need to modify the code to enable it

would need to be enabled inside /static/index.js and some css added at the bottom of static/css/code/syntax-highlight.css

not sure yet how to go about with togging it on/off, but there must be some way to programmatically modify the editor instance

[samifouad]

here's what it looked like in both themes

[lpil]

Oh wow, it is supported! Neat! I couldn't find it in the documentation.

[samifouad]

me neither hah

also i think hiding the line number column via css would work. just not sure how to approach a toggle icon because that top right corner is beautiful and i would definitely ruin it with my design skills 😄