V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
shubiao
V2EX  ›  程序员

请问 vuepress1.x 怎么渲染句首空格

  •  
  •   shubiao · 358 天前 · 713 次点击
    这是一个创建于 358 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我在做制作一个Java 开发手册的在线 markdown 版, 为了保持和 pdf 格式一致, 想渲染出来句首的空格.

    我做的在线版: https://lijilei.com/alibaba-java-guide/guide.html

    已询问 gpt4,下附, 但没生效 我本地用的是 Typora, 句首加了空格的, 还加了 Tab

    烦请大佬们帮我解决一下

    如果能把 Tab 也渲染成缩进就更好了

    # 拉代码
    git clone [email protected]:lijileiGood/lijileiGood.github.io.git
    
    # 进入文件夹, install 等步骤
    
    # 启动
    vuepress dev docs
    

    我在使用 vuepress, 这是我的 config.js, 我应该怎么往里写, 达到句首空行保留的效果

    module.exports = {
      title: '李吉磊 Blog',
      themeConfig: {
        nav: [
          { text: 'Github', link: 'https://github.com/lijileiGood/lijileiGood.github.io' },
        ],
      },
      markdown: {
        extendMarkdown: md => {
          md.set({
            // /n 换行
            breaks: true,
            // 支持文本中有<>
            html: false,
          });
          
        }
      }
    }
    

    GPT4

    你可以在 extendMarkdown 函数中添加一个自定义的规则来处理句首的空格。这个规则会在解析 Markdown 之前运行,将每行句首的所有空格替换为相同数量的 &nbsp;。这样,句首的空格就可以在 HTML 中正确显示了。

    以下是如何修改你的 config.js 文件:

    module.exports = {
      title: '李吉磊 Blog',
      themeConfig: {
        nav: [
          { text: 'Github', link: 'https://github.com/lijileiGood/lijileiGood.github.io' },
        ],
      },
      markdown: {
        extendMarkdown: md => {
          md.set({
            // /n 换行
            breaks: true,
            // 支持文本中有<>
            html: true, // 需要将此项设置为 true ,以便支持 HTML 实体(如&nbsp;)
          });
    
          // 添加自定义规则
          md.core.ruler.push('replace_leading_spaces', function(state) {
            state.src = state.src.replace(/^ +/gm, function(match) {
              return '&nbsp;'.repeat(match.length);
            });
          });
        }
      }
    }
    

    在这个例子中,replace_leading_spaces 函数会在解析 Markdown 之前运行,将每行句首的所有空格替换为相同数量的 &nbsp;。这样,句首的空格就可以在 HTML 中正确显示了。注意,^ + 是一个正则表达式,匹配每行开头的一个或多个空格,gm 是全局和多行匹配的标志。

    另外,你需要将 html 选项设置为 true,以便支持 HTML 实体(如 &nbsp;)。如果你将 html 选项设置为 false,那么 HTML 实体将不会被正确解析,而是直接显示为文本。

    第 1 条附言  ·  357 天前
    不情之请, 能否拉下代码帮忙改下?
    4 条回复    2023-12-06 09:05:08 +08:00
    hymxm
        1
    hymxm  
       358 天前
    css 可以吗?
    ```css
    p {
    text-indent:2em
    }
    ```
    shubiao
        2
    shubiao  
    OP
       358 天前
    @hymxm 感谢回复
    不过我没搞成功
    根据官方文档, 引入这个 css 后, 整个项目的样式都变了~
    shubiao
        3
    shubiao  
    OP
       358 天前
    @shubiao 不情之请, 能否拉下代码帮我改?
    hymxm
        4
    hymxm  
       357 天前
    那你换成
    ```
    .page p {
    text-indent:2em;
    }
    ```
    试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1069 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 21:37 · PVG 05:37 · LAX 13:37 · JFK 16:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.