标签: remarkjs

我正在使用Gatsbyjs和NetlifyCMS构建一个网站.我已经开始使用这个启动器https://github.com/AustinGreen/gatsby-starter-netlify-cms,我现在正在尝试自定义它.

我想在markdown文件的frontmatter中使用自定义变量,如下所示:

---
templateKey: mirror
nazev: ?ernobílá
title: Black and White
cena: '2700'
price: '108'
thumbnail: /img/img_1659.jpeg
---

我想用GraphQL访问这些数据.我使用gatsby-source-filesystem和gatsby-transform-remark.这是我的查询:

  {
  allMarkdownRemark {
    edges {
      node {
        frontmatter {
          templateKey
          nazev
          title
          cena
          price
        }
      }
    }
  }
}

我无法让GraphQL读取我自己的变量,它只识别title和templateKey(那些已经在启动器中使用过的).我收到此错误:

{
  "errors": [
    {
      "message": "Cannot query field \"nazev\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": 7,
          "column": 11
        }
      ]
    },
    {
      "message": "Cannot query field \"cena\" on type \"frontmatter_2\".",
      "locations": [
        {
          "line": …

我有点困惑。我认为remark是一个markdown处理器，rehype是一个html处理器。因此，remark 需要一些 markdown，对其进行转换，然后返回一些 markdown。Rehype 获取一些 html，对其进行转换，然后返回一些 html - 这是正确的吗？

例如：我遇到了软件包remark-slug和rehype-slug，它们似乎做基本上相同的事情\xe2\x80\x94 两者之间有什么区别？

我正在使用 Gatsby 和 MarkdownRemark。

我想查询降价文件，然后将它们过滤到子目录中包含的文件。我的文件夹结构如下所示：

- src
 - pages
   -index.md
   -about.md
   - team
    - team_member_1.md
    - team_member_2.md
    - team_member_3.md

到目前为止，我可以查询目录中的所有降价页面，但在尝试过滤路径时遇到了问题。必须有一种方法可以使用 graphQL 查询来做到这一点。

相反，我所做的是映射所有结果，然后检查 slug 字符串是否包含“团队”，这告诉我它在“团队”文件夹中。然后它制作组件。

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import TeamMember from '../components/TeamMember.js'
const Team = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            fields{
              slug
            }
            frontmatter {
              name
              position
              image
            }
          }
        }
      }
    }
  `)

  return (
    <div>
      {data.allMarkdownRemark.edges.map( (item, index) => { …

我正在使用该xaringan包进行r演示:

https://cran.r-project.org/web/packages/xaringan/index.html

它建立在remark.js图书馆之上.

我想使用两列布局,即原始remark.js预告片演示中的类似内容:

https://remarkjs.com/

原始css规则(嵌入在演示文稿的源中)通过以下方式指定布局:

/* Two-column layout */
.left-column {
  color: #777;
  width: 20%;
  height: 92%;
  float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
  color: #000;
}
.right-column {
  width: 75%;
  float: right;
  padding-top: 1em;
}

问题是当你--在其中一个列中使用时,它不能按预期工作 - 它应该触发增量幻灯片...

这确实有效,子弹点以递增方式显示:

# Slide 1
- hello
--
- again

---
# Slide 2
- and one
--
- more

但是在一个专栏中它不起作用:

.left-column[
# Column 1
- hello
-- …

我用来remark获取包含 HTML 标签的 Markdown 文档的 AST。当我运行这个时：

const remark = require('remark')
const result = remark.parse('<h1>First</h1>')
console.log(JSON.stringify(result, null, 2))

我得到一个包含 1 级标题的 AST：

{
  "type": "root",
  "children": [
    {
      "type": "heading",
      "depth": 1,
      "children": [
        {
          "type": "text",
          "value": "Title",
          "position": {
            "start": {
              "line": 1,
              "column": 3,
              "offset": 2
            },
            "end": {
              "line": 1,
              "column": 8,
              "offset": 7
            }
          }
        }
      ],
      "position": {
        "start": {
          "line": 1,
          "column": 1,
          "offset": 0
        },
        "end": {
          "line": 1,
          "column": 8, …

我试图遵循有关包含 gatsby-plugin-mdx 的 rehype 插件的文档。具体来说，我正在尝试使用该rehype-slug插件。我安装了用 npm 打包的包并将我的gatsby.config.js文件设置为

module.exports = {
  siteMetadata: {
    siteUrl: "https://www.yourdomain.tld",
    title: "test Website",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-mdx",
      options:{
        rehypePlugins: [
          require("rehype-slug")
        ]
      }
    }
  ],
};

我在尝试使用remark-math和rehype-katex插件时遇到类似的问题。我使用的是 Gatsby CLI 版本 3.13.0。即使使用全新的网站，问题仍然存在。任何有关此问题的帮助将不胜感激。

我正在尝试使用remarkjs生态系统来解析包含 markdown 和 frontmatter 的文件，并将其转换为 HTML。该文件可能如下所示：

---
title: Title
---

# This is a heading

我设法解析了markdown，这可以按照GitHub README文件中的示例来完成，而且我也知道有一个remark-frontmatter包。然而，仅仅使用前面提到的示例中的包就可以使解析器完全忽略 frontmatter 部分。当然，这部分不应该包含在 HTML 中，但我仍然想使用它。但据我所知，它不是输出的一部分。这让我想到了我的问题：如何使用这些包访问 frontmatter？我知道它正在过程中的某个地方被解析，但是我如何访问它？

是否可以使用 knitr 幻灯片（使用xaringan自定义样式）为长功能制作垂直滚动条？我正在尝试基于上一个问题如何使垂直滚动条出现在 RMarkdown 代码块（html 视图）中的一些选项，但不知道如何仅对长函数（高度超出框架）执行此操作。任何建议都非常受欢迎。

---
title: "title"
subtitle: "subtitle"
author: "author"
date: "2017"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "style.css"]
    nature:
      highlightStyle: zenburn
      highlightLines: true
      countIncrementalSlides: false
---

```{r , echo=FALSE, include=FALSE}
library(knitr)
opts_chunk$set(fig.align='center', message=TRUE, error=TRUE, warning=TRUE, tidy=TRUE, comment = "##", echo = TRUE, dev='svg')
options(width=65)
```

```{r}
fu <- function(x){
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
}
```

在 xaringan 演示中，我想展示如何将 R 代码放入 R Markdown 文档中。这将我带到了 xaringan (R Markdown) 文档中逐字 R Markdown 的危险水域。

只要后面的幻灯片上没有 R 代码块，就可以逐字显示内联代码。如果稍后有代码块，则逐字内联代码中断后的所有幻灯片分离。它们显示为水平线。如果我删除代码块并保持其他所有内容不变，幻灯片分离将再次正常工作。

我在knitr FAQ和提到的博客文章中阅读了 #7以及关于stackoverflow和R Views 的内容。我不知道是什么让 xaringan 感到困惑。

test_verbatim.Rmd文件内容：

---
title: "Verbatim Inline Code"
output: xaringan::moon_reader
---
# Before

empty

---
# Current

This will show a verbatim inline R expression `` `r
1+1` `` in the output.

---
# After

An R Code Chunk breaks the slide separator. Without the chunk, slide separation …

是否可以使用演示者备注打印 xaringan 幻灯片？

我知道我可以使用这些方法打印幻灯片（https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF）。但是我无法将演示者笔记打印出来。

谢谢！