Styling of inline code references

[Bouke]

Describe the bug Inline

codeblocks

are not

rendered

on the

same line

.

To Reproduce Steps to reproduce the behavior:

1. Trigger inline code blocks

Expected behavior It should render inline codeblocks on the same line.

Screenshots

Configuration: Please provide the following N/A

Logs N/A

Additional context N/A

[Bouke]

I have added the following custom styles, which seem to work pretty ok:

p > div, li > div {
	display: inline;
	line-height: inherit !important;
	margin: 0 !important;
	padding: 2px 4px !important;
}

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[github-actions[bot]]

This issue was closed because it has been inactive for 14 days since being marked as stale.

[Bouke]

Not stale, just unresponsive maintainers.

[koberghe]

I had ChatGPT do it for me.

1. In answer.tsx, update your components definition

const components = {
  code({
    inline,
    className,
    children,
    node,
    ...props
  }: {
    inline?: boolean;
    className?: string;
    children?: React.ReactNode;
    node?: any;
  }) {
    // If this is *inline* code (single backticks), just render a normal inline <code>
    if (inline) {
      return <code {...props}>{children}</code>;
    }

    // If it's a fenced code block (triple backticks), parse the language from className
    const match = /language-(\w+)/.exec(className || '');
    const language = match ? match[1] : '';

    // Convert children to a string, removing trailing newlines
    const codeString = String(children).replace(/\n$/, '');

    // Now syntax highlight, so it appears as a block
    return (
      <SyntaxHighlighter style={nord} language={language} PreTag="div" {...props}>
        {codeString}
      </SyntaxHighlighter>
    );
  },
};

2. In Answer.module.css, add

.answerText code {
  background-color: #f5f5f5; /* or your preferred color */
  color: #c7254e;           /* optional text color */
  padding: 2px 4px;         /* small horizontal padding */
  border-radius: 4px;       /* rounded corners */
  font-family: Menlo, Monaco, "Liberation Mono", Consolas, monospace;
  font-size: 90%;           /* typically a bit smaller than normal text */
}