denoland / deno-gfm

Server-side GitHub Flavored Markdown rendering for Deno
https://jsr.io/@deno/gfm
MIT License
221 stars 33 forks source link

Use ordered list with code block #121

Open igorbrasileiro opened 3 months ago

igorbrasileiro commented 3 months ago

Question

How can I use code block inside an ordered list? The number is reseting. Example below


  1. Edite o arquivo db/schema.ts para criar tabelas.
    
    import { integer, sqliteTable, text } from "drizzle-orm/sqlite-core";

export const profiles = sqliteTable("profiles", { id: integer("id").primaryKey({ autoIncrement: true }), name: text("name").notNull(), email: text("email"), });

2. Execute a deno task `db:setup:deps` no seu terminal para instalar as
   dependências necessárias para realizar o schema migration. É necessário
   versão do deno maior ou igual a 1.43.0 e utilizar a variável de ambiente
   `DENO_FUTURE=1` para habilitar a instalação de módulos npm.

```sh
DENO_FUTURE=1 deno task db:setup:deps

The result from GitHub's markdown ☝️

The result with deno-gfm's markdown 👇 image

igorbrasileiro commented 3 months ago

The same example using the example from the project: image

  1. Buildscript
import { build } from "https://deno.land/x/esbuild/mod.ts";
import sassPlugin from "https://deno.land/x/esbuild_plugin_sass_deno/mod.ts";

build({
  entryPoints: [
    "example/in.ts",
  ],
  bundle: true,
  outfile: "example/out.js",
  plugins: [sassPlugin()],
});
  1. Main Entrypoint File:
import styles from "./styles.scss";

document.getElementsByTagName("head")[0].innerHTML +=
  `<style>${styles}</style>`;

Some strikethrough text

deer commented 2 months ago

I agree that the number is resetting, but you're also not using lists correctly. I guess we could consider this a bug in deno-gfm, but let me show you what I mean first.

Compare this source:

1. test
```ts
const foo: string = "";
```

87. asdf
```ts
const foo: string = "";
```

2. foo
```ts
const foo: string = "";
```

Which renders like this:

  1. test

    const foo: string = "";
  2. asdf

    const foo: string = "";
  3. foo

    const foo: string = "";

Against this source:

1. test
    ```ts
    const foo: string = "";
    ```

87. asdf
    ```ts
    const foo: string = "";
    ```

2. foo
    ```ts
    const foo: string = "";
    ```

Which renders like this:

  1. test

    const foo: string = "";
  2. asdf

    const foo: string = "";
  3. foo

    const foo: string = "";

Note how the code blocks in the second example are indented and how the numbers are irrelevant. In your original example and my first example, they are not. This means the code blocks aren't actually part of the list, and in reality, there are multiple lists. So if there's a bug here, it's that deno-gfm doesn't preserve the initial value of a single item ordered list.

Instead, you should indent your blocks with four spaces in order to get them to participate in the list.

Btw, it would be helpful to include the source of the markdown example. You can escape your markdown by using a different delimiter for the code block, e.g. ~~~md yourMarkdownHere ~~~

I would leave this issue open because there is obviously a discrepancy with what github does. This likely causes confusion to others as well.