feat(markdown): rehype-highlight plugin for code blocks highlight and remark-emoji for emojis like this :emoji:

Author: artem-korolev

package-lock.json

@@ -66,6 +66,8 @@
 		"html-webpack-plugin": "3.2.0",
 		"pretty-quick": "1.7.0",
 		"node-sass": "4.9.3",
+		"rehype-highlight": "^2.2.0",
+		"remark-emoji": "^2.0.2",
 		"sass-loader": "7.1.0",
 		"source-map-loader": "^0.2.4",
 		"style-loader": "0.23.0",
@@ -134,6 +136,8 @@
 		"node-sass": "4.9.3",
 		"prettier": "1.14.3",
 		"pretty-quick": "1.7.0",
+		"rehype-highlight": "^2.2.0",
+		"remark-emoji": "^2.0.2",
 		"sass-loader": "7.1.0",
 		"style-loader": "0.23.0",
 		"webpack": "4.20.2",

package.json

@@ -1,6 +1,8 @@
 const webpack = require("webpack");
 const convert = require("koa-connect");
 const history = require("connect-history-api-fallback");
+const highlight = require("rehype-highlight");
+const emoji = require("remark-emoji");
 const commonPaths = require("./paths");
 
 module.exports = {
@@ -45,7 +47,18 @@ module.exports = {
 			},
 			{
 				test: /\.md$/,
-				loader: ["babel-loader", "@hugmanrique/react-markdown-loader"],
+				use: [
+					{
+						loader: "babel-loader",
+					},
+					{
+						loader: "@hugmanrique/react-markdown-loader",
+						options: {
+							rehypePlugins: [highlight],
+							remarkPlugins: [emoji],
+						},
+					},
+				],
 			},
 		],
 	},

src/webpack.config.common.js

@@ -1,4 +1,5 @@
 const HtmlWebpackPlugin = require("html-webpack-plugin");
+const webpack = require("webpack");
 const commonPaths = require("./paths");
 
 module.exports = {
@@ -38,6 +39,12 @@ module.exports = {
 		new HtmlWebpackPlugin({
 			template: commonPaths.templatePath,
 		}),
+		new webpack.HotModuleReplacementPlugin(),
 	],
 	devtool: "source-map",
+	devServer: {
+		compress: true,
+		historyApiFallback: true,
+		hot: true,
+	},
 };