reactjs - 棱镜语法高亮在 Gatsby markdown 中不起作用
问题描述
我的语法突出显示无法正常工作。显示编号的行,背景工作,但语法没有被突出显示。
如果这有所作为,我也在使用 Bulma。我不知道样式是否相互覆盖?
这是我在 Gatsby 博客上看到的屏幕截图:
盖茨比浏览器:
require('prismjs/themes/prism.css');
require('prismjs/plugins/line-numbers/prism-line-numbers.css');
这是我的插件
plugins: [
`gatsby-plugin-sass`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-react-helmet`,
`gatsby-plugin-catch-links`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
path: `${__dirname}/src/pages`,
},
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: 'language-',
inlineCodeMarker: null,
aliases: { sh: 'bash', js: 'javascript' },
showLineNumbers: true,
noInlineHighlight: false,
languageExtensions: [
{
language: 'superscript',
extend: 'javascript',
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
// Customize the prompt used in shell output
// Values below are default
prompt: {
user: 'root',
host: 'localhost',
global: false,
},
},
},
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 1200,
},
},
],
},
},
// `gatsby-transformer-remark` -- this overrides previous config
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/mt.png`, // This path is relative to the root of the site.
},
},
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
https://github.com/wbonneville/gatsby_blog这是我的仓库。有人看到我在这里做错了吗?
解决方案
推荐阅读
- python - 如果在原地旋转,为什么图形的旋转会中断?
- html - wordpress 中的 HTML 搜索栏
- javascript - JavaScript 数组未在终端中显示所有输出值
- java - 无法分配 8208 字节分配,其中 5640 空闲字节和 5KB 直到 OOM,最大允许占用空间 536870912,增长限制 536870912
- javascript - Javascript button toggle not working on first click, only second click or more
- javascript - Firebase 实时数据库 - 仅获取我所属的节点
- asp.net-mvc - 收到此消息连接尝试失败,因为连接方在第二次请求时没有正确响应
- python - 如何停止列表,用户输入缺少数字
- firebase - 来自 Future (Firebase) 的 TextFormField (Flutter) 中的初始值
- javascript - 将特定数组值转换为另一个数组打字稿?