在 Meteor 中自定义 {{#markdown}} 行为答案

【问题标题】：Customize {{#markdown}} behavior in Meteor在 Meteor 中自定义 {{#markdown}} 行为
【发布时间】：2021-07-18 19:41:26
【问题描述】：

我喜欢 Markdown。这个概念是我作为程序员的几年中遇到的最优雅和最有用的概念之一。所以我很高兴看到 Meteor 实现了 Showdown 包并让我将它与 {{#markdown}} 块助手一起使用。

然而，当我开始使用它时，我最不喜欢的 Markdown 陷阱突然出现了：缩进代码块。

这样写：

<template name="home">
    {{#markdown}}
        Hello!!! Welcome to *My Site*!!
    {{/markdown}}
</template>

结果如下：

My Hello!!! Welcome to *My Site*!!

格式化为 CODE!!!!

我讨厌缩进的代码块。他们完全搞砸了在编程环境中实际使用 Markdown 的尝试。代码大量缩进，这是有充分理由的。它使事情井井有条，并使行为清晰。因此，Markdown 规范多年来一直忽略这一点的事实让我大吃一惊。 Github 的围栏代码块是一种无限更智能的方式来执行此操作，因为它不需要重复敲击制表符或空格键，使其更易于编辑，并且文本中发生的事情更清晰.

不管怎样，</rant>。

我想自定义流星使用的降价。如何？？我查看了Atmosphere 并搜索了降价，但没有发现任何适用的。另外，我不确定如何在流星环境中使用 Showdown 扩展。

欢迎任何解决方案！我真正想要的是一个没有缩进代码块的降价实现。他们很愚蠢。

【问题讨论】：

你可以这样做：{{#markdown}}Hello!!! Welcome to *My Site*!!{{/markdown}}（{{#markdown}} 和你的降价内容之间没有换行符/缩进/间距`
嗯，我知道，但我希望能够在我的网站上、在其他块元素内、在其中包含块元素等做很多 Markdown。
要自定义markdown包，您需要从github.com/meteor/meteor/tree/devel/packages/showdown手动将其添加到/packages。（在摊牌目录中）。然后，您可以按照自己的方式对其进行自定义。 showdown.js 文件的注释非常详细，因此在自定义显示中导航应该不会很困难。
我在使用 {{#markdown}} {{data}} {{/markdown}} 时没有得到任何结果，但我可以在 markdown 之外访问 {{data}}。

标签： meteor markdown showdown

【解决方案1】：

为什么不实现您自己的 markdown 助手：

// this is based on showdown package in spark branch
Handlebars.registerHelper('markdown', function (options) {
  return UI.block(function () {
    var self = this;
    return function () {
      var renderer = new marked.Renderer();
      var text = UI.toRawText(self.__content, self /* parentComponent */);
      return HTML.Raw(marked(trimIndentation(text), { renderer: renderer }));
    };
  });
});

trimIndentation 或多或少看起来像这样：

function trimIndentation(text) {
  var regexp = null,
      result = "";
  return text.split('\n').map(function (line) {
    var match = (regexp || /(\s*)(\s*[^\s]+.*)/).exec(line);
    if (match) {
      !regexp && (regexp = new RegExp("(\\s{" + match[1].length + "})(.*)"));
      return match[2];
    }
    return line;
  }).join('\n');
}

在上面的示例中，我使用了新模板引擎的语法以及 marked 库而不是旧的 showdown（或者我应该说 pagedown?)，但您当然可以使用自己选择的设置来做同样的事情。

【讨论】：

酷！肯定会做更多的工作，但等一切都完成后，我会开始做的！

【解决方案2】：

Markdown 似乎是deprecated。你可以用markdown-it替换原生markdown：

安装依赖，npm install markdown-it markdown-it-attrs。并将 markdown-it 设置为新的默认 markdown 空格键。

var md = require('markdown-it')();
var markdownItAttrs = require('markdown-it-attrs');
md.use(markdownItAttrs);
// md.disable("code")

您可以决定要禁用或编辑的rules。就我而言，我禁用了代码块，但您可以查看自己案例的文档。

然后将markdown实现为空格键：

  Blaze.Template.registerHelper("markdown", new Template('markdown', function () {
    var view = this;
    var content = '';
    if (view.templateContentBlock) {
      content = Blaze._toText(view.templateContentBlock, HTML.TEXTMODE.STRING);
    }
    return HTML.Raw(md.render(content));
  }));

在实施您的版本之前，请务必删除 markdown (meteor remove markdown)。

然后您可以使用{{#markdown}} 空格键调用它。

【讨论】：