deckgo/gatsby-remark-highlight-code

Adds stylish cards and syntax highlighting to code blocks in markdown files

gatsby-remark-highlight-code's Issues

highlight-code layout showing but the code is not visible (Gatsby)

I've set up everything correctly as I've run through them multiple times looking for a mistake somewhere, but there's nothing I can find, the same issue is showing up on the deckdeckgo docs in the "Install DeckDeckGo Highlight Code from NPM" section. It's not showing the "npm install" command. Inside the shadow-root, it correctly points to the but I'm not able to see the code.

Plugin doesnt work in gatsby v5

I was creating a coding blog website and wanted to integrate this highlight plugin.
I tried the steps mentioned in the plugin's GitHub documentation. I tried this on a sample hello world first before integrating this into a full-blown one.

I already had gatsby-plugin-mdx installed, so was not looking to install the gatsby-transformer-remark just for this one.
A hello world implementation on a sample gatsby site would have helped people a lot.
While the plugin looks awesome, the documentation could equal that with a few live working docs.

I was able to get the same working with gatsby-remark-prismjs but was curious about using this plugin instead.

Here is a hello world gatsby v5 website which I am trying to integrate this plugin.

Steps already tried:

install npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

add the same in gatsby config

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [".mdx", ".md"],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
        },
      ],
    },
  },
];

Tried loading this in index.js, components

import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
deckDeckGoHighlightElement();

Any pointers help!

Thanks in advance,
Hari

How do I override inlineCode?

So I am using Material UI and would like to format the inlineCode to use a certain Material UI component.

First clue I got was to use MDXProvider for such. But there seems to be a conflict if I use this plugin and creating a custom code component. Maybe share some snippets on how to workaround this? Very new to using your plugin. It is really awesome but would to covert POST to <Chip label={"POST"} />.

Unable to display code if language is not supported

Uncaught (in promise) TypeError: Cannot read property 'require' of undefined
    at DeckdeckgoHighlightCode.initLanguagesToLoad (:8000/0.js:2214)
    at DeckdeckgoHighlightCode.loadLanguages (:8000/0.js:2205)
    at DeckdeckgoHighlightCode.componentDidLoad (:8000/0.js:2146)

Below is the result for rendering Markdown text:

```text
Blablabla
\```

Maybe we can fallback to default language when we get an unsupported language?

Syntax highlighting not working on deployed site

The syntax is not getting highlighted when i build the app and deploy it to netlify.
It works on localhost. Please assist.

Latest version generates errors during build

Using the latest version of gatsby-remark-highlight-code(1.3.2) and @deckdeckgo/highlight-code(1.0.4), I get the following error during gatsby build:

(node:25265) UnhandledPromiseRejectionWarning: TypeError: head.querySelector is not a function
    at bootstrapLazy (/Users/tai.nguyen/Documents/GitHub/commercial-documentation/public/render-page.js:2473:42)
    at /Users/tai.nguyen/Documents/GitHub/commercial-documentation/public/render-page.js:2800:72
    at processTicksAndRejections (internal/process/task_queues.js:97:5)

The stack trace isn't very helpful but removing usage of the component gets rid of the error.

Support for gatsby 5?

> docker compose run --rm app npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^5.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/gatsby-remark-highlight-code
npm ERR!   gatsby-remark-highlight-code@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-12-12T21_38_47_556Z-debug-0.log

All your tests run successfully with version 5. Is that enough to validate that everything will work?

Overflow: scroll

Not sure what went wrong here

Config for prismjs?

I'd like to disable the left-trim config from Prismjs. Is there a way to change this behaviour?

https://prismjs.com/plugins/normalize-whitespace/

Hide the colored balls in Carbon theme

Hey, is it possible to hide the colored balls on Carbon theme? I'd like to keep the card background but without the colored balls that appear on top of each listing. Or alternatively, can you turn the background on for None theme?

How to set font size of code?

Hi how do I use CSS variables as mentioned, I have never used them before. For example I want to make the font size bigger using the variable --deckgo-highlight-code-font-size.

How to disable `overflow-y` in tag `<code />`

First of all, i love your plugin. It saved me a huge amount of time from configuring prismjs, gatsbyjs and their ecosystems. But I have a some slight issue herre:

1. As you can see in the image, there are some white bar on the right. I noticed that they are created by this style:

I know how to fix this, but I don't know how to implement my fix into your plugin.

2. How can I change the font? It's just, feel crappy to me. My current used fonts are from MacOS system. (I checked your site DeckDeckGo and the font looks exactly the same as the font I'm trying to use right now)

Thank your for your time. Any helps to fix these are appreciated to me.

Feature Request: Ability to remove the 3 dots in the window

On the Carbon generator (https://carbon.now.sh/) it is possible to remove the 3 dots using in the Settings -> Window -> Window Controls to produce this type of output

From what I could tell, this functionality is not available unless you use terminal: 'none' which leads to the theme not being used. Would it be possible to add the functionality to use terminal: 'carbon' but remove the 3 dots?

couldnt get this to work

Hey,

sorry for bothering. :) Not sure what am I misising here, but i simpy couldnt get this to work.

I have added the plugin into gatsby-config as always.

plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-reading-time`,
          {
            resolve: `gatsby-remark-highlight-code`
          }
        ],
      }
    },
...

Then in the layout (but tried in the component also which is consuming the content, no success there either):

class Layout extends React.Component {
constructor(props) {
    super(props);
    deckDeckGoHighlightElement()
  }
render() { ... }
}

My content is in markdown files, for example:

const ShoppingList = new Schema({
  createdAt: String,
  isFullFilled: Boolean,
  id: String,
  items: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Product'
  }]
})

But, nothing.

There is no error thrown, or anything.

The result is:

Any idea which direction should I go to debug this? Thank you!

Disabling wordwrap / enabling overflow:scroll?

Enabling overflow scroll does not seem to work for me.

It looks like this:

I would like to have horizontal scroll instead of wordwrapping. How is this possible?

According to documentation overflow should be auto.

I have also tried with this:

deckgo-highlight-code {
  --deckgo-highlight-code-carbon-overflow: scroll;
}

But that does not work

No highlights by default?

When writing out a markdown post using the ``` syntax, the text appears unhighlighted by default. I'm using this plugin in combination with gastby-transformer-remark.

Is it possible to use the above-mentioned syntax inside of a markdown file but have the entirety of the text highlighted?

It's not one of the options to the plugin, wasn't sure if that's possible to configure somehow.

Unable to highlight a single line using the current parseLanguageAndHighlightedLines implementation

I was trying to implement the plugin with the latest release and found out an issue.
In case of just wanting to highlight a single line (let's say line 16), the parseLanguageAndHighlightedLines method returns "16". However, I figured that this doesn't work because your deckgo-highlight-code component only works with ranges. And not a single number per se. And we should rather have the highlight-lines as "16,16". As the current implementation does work for things like dart{16,20-22} but it doesn't work with just dart{16}.

I'll raise a PR 😄.

Solid plugin, shame there's no SSR support

This is a fab plugin and I love it ... it would be really nice if it was rendered on the server instead of the client if that's at all possible.

The reason being, I publish both a React app version of my site and a static HTML version. With the plugin enabled the styles of my code blocks have been removed altogether. I can work around it, so not a breaking issue, but it would also mean less javascript being sent down the wire...

My code doesn't highlight.

Hello, I suppose I followed README and steps but I can't get it to work. In the console it is giving me correct classes, I assume.

<pre>
<code class="lang-javascript"> console.log('hello')</code>
</pre>

And this is my gatsby-config file

module.exports = {
  siteMetadata: {
    title: `My Online Portfolio`,
    description: `my home on the web`,
    siteUrl: `https://evilsaint.cloud`,
    social: {
      twitter: `https://twitter.com/_EvilSaint_`
    },
  },
  plugins: [
  `gatsby-plugin-image`, 
  `gatsby-plugin-sitemap`,
  'gatsby-transformer-remark',
  'gatsby-remark-highlight-code',
  'gatsby-plugin-mdx',
  `gatsby-plugin-sharp`, 
  `gatsby-transformer-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'carbon'
          }
        },
      ],
    },
  },
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [".mdx", ".md"],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'carbon'
          }
        },
      ],
    },
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "images",
      "path": "./src/images/"
    },
    __key: "images"
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": "pages",
      "path": "./src/pages/"
    },
    __key: "pages"
  },
  {
    resolve: 'gatsby-source-filesystem',
    options: {
      "name": `blogs`,
      "path": `${__dirname}/src/blog/`,
    },
    __key: "blogs"
  },  
]
};

I alos installed gatsby-remark-highlight-code as a dependency. I'm really lost can you help me out?

Configuration does not take effect afterwards

Configuration does not take effect afterwards 👇

• gatsby-config.js

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
          options: {
            terminal: 'carbon',
            theme: 'blackboard'
          }
        },
      ],
    },
  },
]

Add plugin config for line number and other attributes

Thanks for building this plugin. I just discovered this plugin and I love using it.

I'll love to have more a few more attributes added to the plugin config. The one I currently want to be added is editable & line numbers.

Another feature that I think will be nice to have is the ability to pass a CSS or config var that will enable library users to set the white-space property of the code block in the shadow dom. The code currently wraps and I'll prefer it to have a horizontal scroll. I know this one might require a some changes in @deckdeckgo/highlight-code web component.

I've dug through the code and wouldn't mind making a PR if you think these features are suitable for this library

Rerendering deckgo-highlight-code compontent on state change

I spent a few hours yesterday trying to figure out how to re-render deckgo-highlight-code component when the state changes with no success.

this:

import React from 'react';

import {defineCustomElements as highlightCodeElements} from '@deckdeckgo/highlight-code/dist/loader';
highlightCodeElements();

export const CustomComponent = ({ modelName, ...props }) => {
    return <>
        {modelName}
        <deckgo-highlight-code language="php">
            <code slot="code">echo "{modelName}";</code>
        </deckgo-highlight-code>
    </>
};

Just plain does not work. When modelName changes, highlighted code stays the same.

initial load

when modelName changes

Occasionally not loading code until I reload page

First of all, thanks for this plugin. It's super handy and looks really good!
I'm facing a problem where, only sometimes, the card appears but it just does not load the code inside. If I reload the page, the code loads and everything gets right.
I'm 99% sure that until now this only happened to me on HTML cards.

As you can see in this image - https://ibb.co/MV5jNWw - the first card that had HTML did not load the code while the other with CSS loaded it.
Is this a known issue?

Support for highlightLines attribute

The deckdeckgo code component allows highlighting certain lines.
Adding the support in this package would be awesome!
https://docs.deckdeckgo.com/components/code/#app-components-highlight-code-examples

Support for gatsby 4?

I managed to install highlight code without issues; but after upgrading npm I now get this error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR!   gatsby@"^4.4.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^3.0.0" from [email protected]
npm ERR! node_modules/gatsby-remark-highlight-code
npm ERR!   gatsby-remark-highlight-code@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

It looks like language mermaid is not supported

First of all, congratulations for the amazing plugin 😄

Although it is supported by prismjs, when I try to use the mermaid language, I get an error Language mermaid is not supported in my console.

README.md images are broken at official Gatsby site

You can access above page to click below link.
https://www.gatsbyjs.org/packages/gatsby-remark-highlight-code/

And that images are broken caused by using local image source.

I don't know It need to fix. If you make sense of it, Could I fix it for you?

Thanks.

Highlight-lines does not work anymore

Seems that providing tick tick tick javascript{2, 3-4, 7, 8-15} now split the {2 in node.lang and the rest in node.meta

I'm on it. Solution is already working just need to write a test.

Will finish tomorrow.

Hiding the header?

I would like to remove the header:

Is there a way to remove it?

Update readme for gatsby-plugin-mdx

Heyo! I really like the styling of these code blocks. Cool project!

For my website, I'm using gatsby-plugin-mdx instead of gatsby-transformer-remark.

I had no problem getting it to work, but it took me a few minutes to realize the gatsby-config.js needed to be tweaked slightly.

I would suggest adding a section to your readme for gatsby-plugin-mdx like this:

// In your gatsby-config.js
plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [".mdx", ".md"],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-highlight-code`,
            options: {
              terminal: "ubuntu",
            },
          },
        ],
      },
    },
]

Cheers,
-Mike

provide more carbon theming options

It would be nice to provide more out of the box theming options for the style carbon.

For such purpose we opened a related issue in our mono repo -> deckgo/deckdeckgo#733

Prismjs css not imported in Web Component

Related to deckgo/deckdeckgo#670

Workaround if needed: use version v1.1.0 of this plugin

Read.me update with Functional component and React Hooks

Hi David. First of all, nice job! 👏
Just one little thing, I think an example using functional components and hooks would be useful.
Something like this:

Class component

async componentDidMount() {
    try {
        const deckdeckgoHighlightCodeLoader = require("@deckdeckgo/highlight-code/dist/loader")
    
        await deckdeckgoHighlightCodeLoader.defineCustomElements(window);
    } catch (err) {
        console.error(err);
    }
}

Functional component with hooks

import React, { Fragment, useEffect } from "react";
import { defineCustomElements as deckdeckgoLoader} from '@deckdeckgo/highlight-code/dist/loader';

const yourComponent = () => {

  useEffect(() => {
    try {
      deckdeckgoLoader(window);
    } catch (err) {
      console.log(err);
    }
  },[]);

  return (
    <Fragment>
      <ComponentOne />
      <ComponentTwo />
      [...]
    </Fragment>
  )
}

export default yourComponent;

What do you think about it?