babel-plugin-prismjs
A babel plugin to use PrismJS with standard bundlers.
How to Use
This plugin allows you to treat PrismJS as a standard module and configure what languages, plugins, & themes you want to bundle with Prism.
In your code, import prismjs:
import Prism from 'prismjs';
// if you are intending to use Prism functions manually, you will need to set:
Prism.manual = true;
Prism.highlightAll();
The exported Prism object will be the fully-configured Prism instance.
Limitations
- You must be using ES6 imports to load PrismJS.
Configuring the plugin
In your .babelrc, register the plugin and configure its dependencies:
{
"plugins": [
["prismjs", {
"languages": ["javascript", "css", "markup"],
"plugins": ["line-numbers"],
"theme": "twilight",
"css": true
}]
]
}
Each key are used as follows:
languages: Array of languages to include in the bundle or"all"to include all languages. Those languages can be found here.plugins: Array of plugins to include in the bundle. Those plugins can be found here.theme: Name of theme to include in the bundle. Themes can be found here.css: Boolean indicating whether to include.cssfiles in the result. Defaults tofalse. Iftrue,imports will be added for.cssfiles. Must betruein order forthemeto work.
-
vue nuxt.js 代码高亮 prismjs 或 highlight.js 插件的用法 功能点分析： 前端vue2.0 + nuxt.js 实现代码高亮 使用的插件是 prismjs 和 babel-plugin-prismjs编译器插件 1.安装 prismjs 插件 和 babel-plugin-prismjs npm install prismjs // 这里也可以使用 yarn add
-
Error: Cannot find module '@babel 0.1 2018.12.29 16:13* 字数 227 阅读 927评论 0喜欢 1 在安装babel的时候，遇到个Error: Cannot find module '@babel/core’问题，查了很多资料才解决，希望能够帮助到各位兄弟。 问题产生的原因 babel-loader和babel-core版本不对应所产生的，
-
Prismjs 是前端界面显示代码语法高亮的npm包 它实现了代码在前端页面显示时就像在编辑器中时一样的样式 要在vue框架中使用这样的装逼神器首先要做的自然是安装他了 npm i --save Prismjs npm i --save babel-plugin-prismjs 复制代码 当然如果你安装使用了淘宝的cnpm自然可以这样安装 cnpm i --save Prismjs cnpm
-
vue2 集成prismjs 1.下载 npm install prismjs -S npm install babel-plugin-prismjs -D 2.配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ [ 'prismjs',
-
安装 # prismjs npm i prismjs -S # prismjs 类型 npm i -D @types/prismjs # vite npm install babel-plugin-prismjs -D # bable webpack npm install vite-plugin-prismjs -D 配置 babel // babel.config.js modul
-
最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题，但是预览编辑器中的内容样式丢失，看过wangEditor的文档后发现用到了Prism.js，现将使用的经验分享。 使用步骤 1、安装prismjs插件 // 1. 安装prismjs 插件 npm install prismjs -S // 2. 安装prismjs 编译器插件 npm install babel-plugin
-
在框架中写文档所以想要代码高亮显示 1.首先安装prismjs npm install prismjs 2.安装babel-plugin-prismjs npm install babel-plugin-prismjs 3.配置babel.config.js module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plu
-
San CLI 默认的 Babel 插件，主要增加transpileDependencies的使用，默认 San CLI 是不会转换node_modules文件夹的 js 的，可以通过在san.config.js配置transpileDependencies： // san.config.js module.exports = { transpileDependencies: [/@ba
-
A plugin that enables the re-use of Babel's injected helper code to save on codesize. NOTE: Instance methods such as "foobar".includes("foo") will not work since that would require modification of exi
-
babel-plugin-webpack-alias This Babel 6 plugin allows you to use webpack aliases and most of webpack resolve features in Babel. This plugin is simply going to take the aliases defined in your webpack
-
DEPREACTED due to lack of support/bug fixes/ new features, project abandoned, please migrate on https://github.com/webpack-contrib/terser-webpack-plugin Babel Minify Webpack Plugin A Webpack Plugin fo
-
webpack-babel-multi-target-plugin This project, inspired by Phil Walton's articleDeploying es2015 Code in Production Today,adds tooling to simplify the additional configuration with aWebpack plugin, B
-
更改历史 * 2018-1-7 高天阳 2.2.2图片改文字 * 2018-1-6 高天阳 格式化文档 * 2017-5-11 高天阳 初始化文档 1 简介、用途 1.1 简介 标准的制定者计划，以后每年发布一次标准，使用年份作为版本号。ES6是在2015年发布的，所以又称为ES2015。 但ES6其实多用于泛指ES5.1版本后的下一代JS标准，它涵盖在ES2015版本上