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

361 天前
 shubiao

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

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

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

烦请大佬们帮我解决一下

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

# 拉代码
git clone git@github.com: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 实体将不会被正确解析,而是直接显示为文本。

715 次点击
所在节点    程序员
4 条回复
hymxm
361 天前
css 可以吗?
```css
p {
text-indent:2em
}
```
shubiao
361 天前
@hymxm 感谢回复
不过我没搞成功
根据官方文档, 引入这个 css 后, 整个项目的样式都变了~
shubiao
361 天前
@shubiao 不情之请, 能否拉下代码帮我改?
hymxm
360 天前
那你换成
```
.page p {
text-indent:2em;
}
```
试试

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/997810

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX