TOML lang line breaks on section

[MatteoGauthier]

Information

• Language: TOML
• Plugins: none

Description
Prism create punctuation element for [[section]] in toml

Code snippet

App.js

import React from "react";
import Prism from "prismjs";
import "prismjs/components/prism-toml";

const App = () => {
  return (
    <PrismCode language="toml">
      {`[[redirects]]
  from = ""
  to = ""
  status = 301`.trim()}
    </PrismCode>
  );
};

export default class PrismCode extends React.Component {
  constructor(props) {
    super(props)
    this.ref = React.createRef()
  }
  componentDidMount() {
    this.highlight()
  }
  componentDidUpdate() {
    this.highlight()
  }
  highlight = () => {
    if (this.ref && this.ref.current) {
      Prism.highlightElement(this.ref.current)
    }
  }
  render() {
    const { children, plugins, language } = this.props
    console.log(children);
    
    return (
      <pre className={!plugins ? "" : plugins.join(" ")}>
        <code ref={this.ref} className={`language-${language}`}>
          {children}
        </code>
      </pre>
    )
  }
}

it render :

[RunDevelopment]

The test page renders everything as expected.

The bug lies somewhere in your code, but unfortunately, I don't know enough about React to tell you what it is.

[MatteoGauthier]

ok

[gomorizsolt]

@MatteoGauthier Did you happen to sort this issue out? I'm also facing with it.

[RunDevelopment]

Looking at the issue again, my best guess is that display: block got applied to redirects. The HTML of redirects is <span class="token table class-name">redirects</span> and you probably have a .table rule (or similar) in your stylesheets.

[gomorizsolt]

Thanks @RunDevelopment for the guess. Indeed, there were additional styles applied to redirect. In my case, Tailwind CSS was the culprit because when you use the @tailwind utilities directive it injects a .table class whose display property is set to table (hence the line breaks because table is a block-level element).

In order to get around this "style glitch", I simply overrode the display property with initial:

@layer utilities {
  .table {
    display: initial;
  }
}