HCL not rendering in Live Preview

Help
1

Steps to reproduce

  1. Create a new note
  2. Add code block with the type set to hcl, example:
``hcl
resource "google_storage_bucket" "bucket" {
  name                        = var.name
  project                     = var.project_id
  location                    = var.location
  uniform_bucket_level_access = true
}
``

Note: Removed a ` to let the markdown render properly.

  1. View the note in Live Preview mode.

Did you follow the troubleshooting guide? [Y/N]

Yes

Tested in Sandbox vault and still occurs.

Expected result

The hcl block looking like Reading Mode:

Reading-Mode
Reading-Mode963Ă—705 29.2 KB

Actual result

It does not look like Reading Mode when in Live Preview:

Live-Preview
Live-Preview963Ă—705 27.7 KB

Environment

SYSTEM INFO:
	Obsidian version: v1.8.4
	Installer version: v1.7.7
	Operating system: Windows 10 Enterprise 10.0.19045
	Login status: logged in
	Language: en
	Catalyst license: none
	Insider build toggle: off
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

Additional information

Screenshots under the Expected / Actual section.

Used a java block as a reference to indicate that it appears hcl is not behaving as expected.

2

This is not a bug. Simply the Editor Parser does not support hcl syntax highlighting.

3

During some other testing, I discovered that when dataviewjs renders stuff (even in live preview) it uses the reading mode render engine. What this means is that if you put the following in a note:

```hcl
resource "google_storage_bucket" "bucket" {
  name                        = var.name
  project                     = var.project_id
  location                    = var.location
  uniform_bucket_level_access = true
}
```

## Using _dataviewjs_

```dataviewjs

dv.paragraph(`
~~~hcl
resource "google_storage_bucket" "bucket" {
  name                        = var.name
  project                     = var.project_id
  location                    = var.location
  uniform_bucket_level_access = true
}
~~~
`)
```

It displays as follows in live preview :

image
image750Ă—685 36.9 KB

You don’t the same kind of editing experience, but you do get the syntax highlighting of an “unknown” language in live preview.

1 Like