Posts: support HLJS style

[gapry]

No description provided.

[amazon-q-developer]

This PR successfully adds Highlight.js support for assembly language syntax highlighting (x86asm, armasm) while maintaining Prism for other languages. The implementation correctly:

• Imports both Prism and HLJS highlighters with appropriate styles
• Conditionally routes assembly languages to HLJS and other languages to Prism
• Updates layout consistency by standardizing max-width to 1024px across components
• Converts markdown code blocks to use the appropriate language identifiers

The code is well-structured and functionally correct. No blocking issues identified.

---

You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.

[gemini-code-assist]

Code Review

This pull request updates several blog posts to use specific assembly language tags (x86asm and armasm) for code blocks and increases the application's maximum layout width from 800px to 1024px. In the MarkdownRenderer, a dual-highlighter system is introduced to support these new languages using Highlight.js alongside Prism. However, the implementation of the light version of Highlight.js is missing the necessary language registration, which will prevent the assembly code from being highlighted correctly. Additionally, using two different highlighting engines may negatively impact bundle size and visual consistency.

[gemini-code-assist]

When using the Light build of react-syntax-highlighter, languages must be manually registered using registerLanguage. Without this registration, the x86asm and armasm code blocks will not be highlighted and will likely fall back to plain text.

Additionally, importing both Prism and HLJS engines, along with two different themes (atomDark and darcula), significantly increases the bundle size and may lead to visual inconsistency across different code blocks. Since Prism already supports assembly dialects (e.g., asm64 or armasm), you might consider using a single highlighting engine for the entire project.

import { Light as HLJSHighlighter } from 'react-syntax-highlighter';
import x86asm from 'react-syntax-highlighter/dist/esm/languages/hljs/x86asm';
import armasm from 'react-syntax-highlighter/dist/esm/languages/hljs/armasm';
import { atomDark as PrismStyles } from 'react-syntax-highlighter/dist/esm/styles/prism';
import { darcula as HLJSStyles } from 'react-syntax-highlighter/dist/esm/styles/hljs';
import './MarkdownRenderer.css'

HLJSHighlighter.registerLanguage('x86asm', x86asm);
HLJSHighlighter.registerLanguage('armasm', armasm);

const HLJS_LANGS = ['x86asm', 'armasm'];