mottox2 / remark-code-titles

16 stars 2 forks source link

Codeblocks nested in quotes get a disconnected code title #4

Open marcofranssen opened 3 years ago

marcofranssen commented 3 years ago

Problem

See this blog, the code title gets disconnected from the code-block itself.

https://marcofranssen.nl/how-to-do-enums-in-go

In top it shows a code title

image

However this title was intended for a codeblock that is way below in the blogpost embedded in a quotation block.

image

Reproduce

Blog markdown extract

It has been a while since I wrote a blog on Go. Since I'm getting the question if Go supports enums every now and then, I thought it would be good to write an article on how to do `enums` in Go.

Go natively does **NOT** have an `enum` type like you might be used to from `c#` or `Java`. However that doesn't mean we can easily define our own type.

In this blog we will cover defining our own type, combined with a piece of code generation. If you are new to `Go`, then consider reading [Start on your first Go project](start-golang) first.

Enums make up a nice API experience for consumers of your library by adding some type safety and giving the developer consuming the library some guidance on the available values.

… left for brevity …

Now before popping a :beer: lets run our application one more time to see the result.

> :warning: Please note if you forget to regenerate the stringer implementation for your types you will get something like following message.
>
> ```bash:terminal
> $ go run .
> # github.com/marcofranssen/go-enum-tutorial/car
> car/brand_string.go:11:7: invalid array index BMW - 0 (out of bounds for 1-element array)
> car/brand_string.go:12:7: invalid array index Mercedes - 1 (out of bounds for 1-element array)
> car/brand_string.go:13:7: invalid array index Audi - 2 (out of bounds for 1-element array)
> car/brand_string.go:14:7: invalid array index Toyota - 3 (out of bounds for 1-element array)
> car/brand_string.go:15:7: invalid array index Volkswagen - 4 (out of bounds for 1-element array)
> car/brand_string.go:16:7: invalid array index Porsche - 5 (out of bounds for 1-element array)
> car/brand_string.go:17:7: invalid array index Ferrari - 6 (out of bounds for 1-element array)
> ```

Go ahead and regenerate the code and run your application again.

The remark processing pipeline looks like this.

import dynamic from "next/dynamic";
import renderToString from "next-mdx-remote/render-to-string";

const components = {
  FontAwesomeIcon: dynamic(
    () =>
      import("@fortawesome/react-fontawesome").then(
        (mod) => mod.FontAwesomeIcon
      ),
    { ssr: false }
  ),
  CodeBlock: dynamic(() => import("../components/blocks/code-block")),
  Adsense: dynamic(() => import("../components/blocks/adsense"), {
    ssr: false,
  }),
  BlockQuote: dynamic(() => import("../components/blocks/block-quote")),
  Image: dynamic(() => import("next/image")),
  Vimeo: dynamic(() => import("@u-wave/react-vimeo")),
};

export default async function markdownToHtml(markdown) {
  return await renderToString(markdown, {
    components,
    mdxOptions: {
      remarkPlugins: [
        require("remark-slug"),
        [
          require("remark-autolink-headings"),
          {
            content: {
              type: "element",
              tagName: "FontAwesomeIcon",
              properties: {
                icon: "link",
                className: [
                  "text-gray-200",
                  "mr-2",
                  "md:-ml-8",
                  "hover:text-gray-300",
                ],
              },
            },
          },
        ],
        require("remark-code-titles"),
        require("remark-prism"),
        require("remark-external-links"),
        require("remark-emoji"),
      ],
    },
  });
}
talatkuyuk commented 1 year ago

I suppose you have to put the code node and the title node in a container, which ensures the title and the code will be together.

If you want them in a div container, you can check new npm package remark-flexible-code-titles out.

**remark-flexible-code-titles** does the same thing with remark-code-titles, but offers additional options to add container element as well. You can also customize the tag name and classnames.