Why is Obsidian YAML syntax highlighting so lacking? Am I missing something?

Expected

Good yaml syntax, like this forum use:

// docker-compose.yaml
version: '3'
services:
  mypostgres: // name
    image: 'posgres'
    image2: posgres
    ports:
      - 5438:5432
//      - 5432:5432      - 
    environment:
      - POSTGRES_PASSWORD=db_pass
      - POSTGRES_USER=db_user
      - POSTGRES_DB=db_name
    volumes:
      - db-data:/var/lib/postgresql/data // check where psql stores data
volumes:
  db-data:
    driver: local

Actual

lacking yaml syntax
When writing the exact same in Obsidian:

  1. Comments are not highlighted
  2. see image2: must I use quotes
  3. lacking highlight in general

I use Obsidian version 1.1.16
Using Obsidian default theme

I downloaded the deb (1.1.16)

Running pop os 22:04 which is Ubuntu based

cat /etc/*release

DISTRIB_ID=Pop
DISTRIB_RELEASE=22.04
DISTRIB_CODENAME=jammy
DISTRIB_DESCRIPTION="Pop!_OS 22.04 LTS"
NAME="Pop!_OS"
VERSION="22.04 LTS"
ID=pop
ID_LIKE="ubuntu debian"
PRETTY_NAME="Pop!_OS 22.04 LTS"
VERSION_ID="22.04"
HOME_URL="https://pop.system76.com"
SUPPORT_URL="https://support.system76.com"
BUG_REPORT_URL="https://github.com/pop-os/pop/issues"
PRIVACY_POLICY_URL="https://system76.com/privacy"
VERSION_CODENAME=jammy
UBUNTU_CODENAME=jammy
LOGO=distributor-logo-pop-os

The Obsidian Team is currently working on “Metadata Improvements” (Roadmap), maybe there will be some improvements for your usecase.

Correction: Yaml comment uses # not // but still, how come The Obsidian forums uses better syntax highlight than the actual Obsidian program itself…

Not sure Yaml syntax is under “Metadata Improvements”

I added “highlighting” to the post title to make clear that you’re asking about the syntax highlighting, not the syntax itself.

I don’t know if there’s a specific reason, but I’d imagine that the metadata isn’t (or wasn’t) expected to be so complex that syntax highlighting would matter much.

So the first issue, as you’ve commented yourself, is that // isn’t legal commenting (at least not in Obsidian), so you need to change that into #. After that you still don’t get the output you want, but I don’t think you see that you’re not getting the definitions you want either.

The image you list with your numbers, are not actually defining any of the POSTGRES_* variables. It’s kind of legal YAML, but it’s defining a list of unquoted strings, and as such no formatting occurs. The same applies to the string starting with db-data:/var/lib/...

If we show the fields as defined within console, we get this output:

image

Do you see how the 5438, POSTGRES_* and db-data are all just lists of strings, and not actual field definitions? All of these have one thing in common, and that is that they’re prefixed with - which jumbles up the defintions. The postgress stuff does in addition use =, and not : in an attempt to separate the fields.

If we correct both of those issues we get the following YAML:

```yaml
# docker-compose.yaml
version: '3'
services: 
  mypostgres: # name
    image: 'posgres'
    image2: posgres
    ports:
      5438: 5432
#      - 5432: 5432
    environment:
      POSTGRES_PASSWORD: db_pass
      POSTGRES_USER: db_user
      POSTGRES_DB: db_name
    volumes:
      db-data: /var/lib/postgresql/data # check where
volumes:
  db-data:
    driver: local
```

And within the forum posts, this shows the differentiation between fields and values. Within Obsidian (in default theme reading view) this shows as:

And the corresponding console output is now:
image

There is still a lack of formatting between the non-quoted text and quoted text, but the formatter also shows a difference in the markup where the the quoted texts are indeed formatted as “strings”, whilst the non-quoted text are just non-quoted and passes straight through.

(I’m not quite sure why my field names are yellow, and not yours)

Also note the difference if you precede the POSTGRES_* with   -, that then the console output becomes:
image

It’s an array of objects, with three elements where the first element has the password field, the second element has the user field, and the third element has the db field. This opposed to having the environment fields defined directly as fields under environment like the previous images showcases.


In summary, you need to use # for comments, and : to separate field names and values, and finally using   - in front of your text defines the fields within a list context. For proper field definitions use indentation of two spaces

3 Likes

Thanks @holroy for your elaborated answer- you gave me an idea,
Since you showed me Obsidian does able to color them, meaning it recognize yaml keys so
I’ll just use custom css snippets to color the yaml keys manually:

To anyone also not having the yaml keys colored, you can use this css snippets

/* YAML color keys in reddish: */
.cm-atom.cm-hmd-codeblock{color: #e06c75}

3 Likes

Ok- yours is colored yellow because it’s on reading mode on oppose to my edit mode
image

Still I use my code to also color the yaml keys in edit mode as well.

1 Like

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.