Laravel 9论坛中Markdown代码块RTL方向修正方案咨询

方法一：CSS强制代码块方向（最简单） #

直接在样式文件中添加以下CSS规则，强制代码块使用左到右方向，不受父元素RTL影响：

pre, pre > code {
    direction: ltr;
    text-align: left;
}

如果全局样式优先级较高，可以添加!important确保生效：

pre, pre > code {
    direction: ltr !important;
    text-align: left !important;
}

方法二：自定义Markdown渲染器（更优雅） #

Laravel的Markdown默认基于league/commonmark包，我们可以自定义代码块的渲染规则，让生成的<pre>标签自动带上dir="ltr"属性：

1. 创建自定义代码块渲染类
   在app/Markdown/CodeBlockRenderer.php中写入：

<?php

namespace App\Markdown;

use League\CommonMark\Node\Block\CodeBlock;
use League\CommonMark\Renderer\NodeRendererInterface;
use League\CommonMark\Renderer\ChildNodeRendererInterface;
use League\CommonMark\Util\HtmlElement;

class CodeBlockRenderer implements NodeRendererInterface
{
    public function render($node, ChildNodeRendererInterface $childRenderer)
    {
        if (!($node instanceof CodeBlock)) {
            throw new \InvalidArgumentException('Incompatible node type: ' . get_class($node));
        }

        return new HtmlElement('pre', ['dir' => 'ltr'], new HtmlElement('code', [], htmlspecialchars($node->getLiteral())));
    }
}

2. 创建对应的扩展类
   在app/Markdown/CodeBlockExtension.php中写入：

<?php

namespace App\Markdown;

use League\CommonMark\Environment\EnvironmentBuilderInterface;
use League\CommonMark\Extension\ExtensionInterface;

class CodeBlockExtension implements ExtensionInterface
{
    public function register(EnvironmentBuilderInterface $environment): void
    {
        $environment->addRenderer(CodeBlock::class, new CodeBlockRenderer());
    }
}

3. 注册扩展
   修改config/markdown.php，在extensions数组中添加自定义扩展：

return [
    // 其他配置...
    'extensions' => [
        // 已有扩展...
        new \App\Markdown\CodeBlockExtension(),
    ],
];

方法三：字符串替换（快速临时方案） #

如果不想修改渲染逻辑，可以直接在输出时替换生成的<pre>标签，添加dir="ltr"属性：

<p dir="rtl">
    {!! str_replace('<pre>', '<pre dir="ltr">', markdown($question->que_body)) !!}
</p>

注意这里把@markdown指令改成了markdown()函数调用，方便对渲染结果进行处理。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi