Single line code block with scroll-x

[hozaifa4you]

I have set up Highlighterjs with my NextJS@13+ page routing, but the code block is taking single line with scroll-x. Look at the image...

import { useEffect } from "react";
import { NextSeo } from "next-seo";
import Link from "next/link";
import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
   faEye,
   faLongArrowAltLeft,
   faLongArrowAltRight,
} from "@fortawesome/free-solid-svg-icons";

import style from "@/styles/blog/blog.module.css";
import client from "@/components/utils/apollo-client";
import LoadingComponent from "@/components/LoadingComponent";

const backendUrl = process.env.NEXT_PUBLIC_API_SERVER_URI;
const frontendUrl = process.env.NEXT_PUBLIC_SITE_URI;

const SingleBlog = ({
   blog,
   latestTenBlogs,
   previousBlog,
   nextBlog,
   recommended,
}) => {


   useEffect(() => {
      const script = document.createElement("script");
      script.src =
         "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js";
      script.async = true;
      script.onload = () => {
         window.hljs.highlightAll();
      };
      document.body.appendChild(script);

      return () => {
         document.body.removeChild(script);
      };
   }, []);

   return (
      <>
         {blog ? (
            <div className="flex justify-center">
               <div
                  className={`px-2 md:px-1 xl:px-5 my-5 mx-5 ${style.individual_article}`}
               >
                  <div className={`grid gap-2 ${style.blog_grid_cols}`}>
                     <div className="md:p-2 shadow-[1px_-1px_5px_-1px_#a0a0a0] order-2 md:order-1">
                        <h2 className="font-semibold border-b border-gray-300 text-gray-900 text-2xl px-2 py-3 mb-2">
                           Recent Articles
                        </h2>
                        <ul>
                           {latestTenBlogs.map((blog) => (
                              <Link key={blog.id} href={`/blog/${blog.slug}`}>
                                 <li
                                    className={`border-b text-lg font-nunito border-gray-300 px-3 py-2 md:p-2 text-gray-800 hover:text-green-700 hover:border-gray-400 overflow-x-hidden`}
                                 >
                                    {blog.title}
                                 </li>
                              </Link>
                           ))}
                        </ul>
                        <br />
                     </div>
                     <div className="p-3 md:p-5 shadow-[1px_-1px_5px_-1px_#a0a0a0] md:order-2 overflow-auto">
                        {blog.title ? (
                           <h1 className="text-xl font-bold md:text-3xl mb-2">
                              {blog.title}
                           </h1>
                        ) : (
                           <h1 className="text-xl font-bold md:text-3xl mb-2">
                              {" "}
                              What is {blog.title}?
                           </h1>
                        )}
                        <div className="flex justify-between font-nunito mb-5">
                           <small className="text-muted">
                              Written by - Aionlinecourse
                           </small>
                           <small className="text-muted">
                              <FontAwesomeIcon icon={faEye} className="mr-2" />
                              {blog.views} times views
                           </small>
                        </div>
                        <hr className="mb-5" />
                        {blog.image && (
                           <Image
                              src={`${backendUrl}/uploads/blog/image/${blog.image}`}
                              alt={blog.title}
                              title={blog.title}
                              width={800}
                              height={600}
                              className="w-full h-auto object-cover max-h-[600px]"
                           />
                        )}
                        <div className="mt-5">
                           <article
                              className={`prose prose-headings:!mt-10 prose-headings:!mb-0 prose-headings:!font-semibold prose-pre:leading-normal prose-code:leading-none font-sailec max-w-full prose-sm sm:prose-base lg:prose-xl prose-a:!text-primary prose-li:!m-0 prose-li:!p-0 prose-li:marker:!text-[#374151] prose-code:!font-light prose-pre:!font-light ${style.blog_container}`}
                              dangerouslySetInnerHTML={{
                                 __html: blog.description,
                              }}
                           />
                        </div>
                        <div className="mt-10 w-full flex justify-between">
                           {previousBlog ? (
                              <Link
                                 href={`/blog/${previousBlog.slug}`}
                                 className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md"
                              >
                                 <FontAwesomeIcon icon={faLongArrowAltLeft} />{" "}
                                 Previous
                              </Link>
                           ) : (
                              <span className="bg-green-100 text-white px-4 py-2 rounded-md cursor-not-allowed">
                                 <FontAwesomeIcon icon={faLongArrowAltLeft} />{" "}
                                 Previous
                              </span>
                           )}
                           {nextBlog ? (
                              <Link
                                 href={`/blog/${nextBlog.slug}`}
                                 className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md"
                              >
                                 Next{" "}
                                 <FontAwesomeIcon icon={faLongArrowAltRight} />
                              </Link>
                           ) : (
                              <span className="bg-green-100 text-white px-4 py-2 rounded-md cursor-not-allowed">
                                 Next{" "}
                                 <FontAwesomeIcon icon={faLongArrowAltRight} />
                              </span>
                           )}
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         ) : (
            <LoadingComponent />
         )}
      </>
   );
};

export default SingleBlog;

The content look like

<p>This type of error occurs due to the incompatible dependencies version of the device. There is a bug in Keras/TensorFlow 2.9 and 2.10, which causes preprocess layers like rescaling to be extremely slow. You can try the model without the rescaling layer. If you want to use this or similar preprocessing layers, you should use TF version 2.8.3 or older. It seems that some problem with the wrong version of TensorFlow/Keras/cuda.<br><p>Choose one stable version, and try again. Many times, the rescaling method occurs in error. If you want to use the rescaling method, then try this class instead of using the rescaling function from Keras. </p><pre class="max-w-full rounded-md w-full"><code class="language-python">class Rescaling(tf.keras.layers.Layer): <br>&nbsp;&nbsp;&nbsp;&nbsp;"""Multiply inputs by `scale` and adds `offset`. For instance: 1. To rescale an input in the `[0, 255]` range to be in the `[0, 1]` range,<br> you would pass `scale=1./255`. 2. To rescale an input in the `[0, 255]` range to be in the `[-1, 1]` range, <br>you would pass `scale=1./127.5, offset=-1`. The rescaling is applied both during training and inference. <br>Input shape:Arbitrary. Output shape:Same as input. Arguments: scale: Float, the scale to apply to the inputs. offset: Float, the offset to apply to the inputs. name: A string, the name of the layer. """ <br>&nbsp;&nbsp;&nbsp;&nbsp;def __init__(self, scale, offset=0., name=None, **kwargs): <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.scale = scale &nbsp;&nbsp;&nbsp;&nbsp;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;self.offset = offset <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super(Rescaling, self).__init__(name=name, **kwargs) <br>&nbsp;&nbsp;&nbsp;&nbsp;def call(self, inputs): <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dtype = self._compute_dtype <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scale = tf.cast(self.scale, type) <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset = tf.cast(self.offset, type) <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return tf.cast(inputs, dtype) * scale + offset <br>&nbsp;&nbsp;&nbsp;&nbsp;def compute_output_shape(self, input_shape): <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return input_shape<br>&nbsp;&nbsp;&nbsp;&nbsp;def get_config(self): <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config = { 'scale': self.scale, 'offset': self.offset, } <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;base_config = super(Rescaling, self).get_config()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return dict(list(base_config.items()) + list(config.items()))
</code></pre><p>You can also notice the preprocessing layers that are used for augmentation purposes. If the problem still remains, then ask the TensorFlow forum or the community. In summary, when you face issues with TensorFlow, Keras then be aware of potential bugs and compatibility concerns. Choose the right version of the libraries. If a Rescaling layer is used then use the custom "Rescaling" layer. Ensure a smoother and more efficient deep learning workflow.</p></p>

How do you think I could fix the problem?

[joshgoebel]

<br> isn't supported you'll need to use actual line breaks.

[hozaifa4you]

<br> isn't supported you'll need to use actual line breaks.

Thanks. I replaced all the br tags inside the code tags, and it is now working well.