Skip to content

Commit b51c894

Browse files
srinivas-ramakrishnasrinivas-ramakrishna
committed
Initial Commit
0 parents  commit b51c894

15 files changed

+7050
-0
lines changed

‎.babelrc

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"presets": ["@babel/env", "@babel/react"],
3+
"plugins": [
4+
"@babel/plugin-proposal-class-properties",
5+
[
6+
"prismjs",
7+
{
8+
"languages": ["javascript", "css", "markup"],
9+
"plugins": ["line-numbers"],
10+
"theme": "twilight",
11+
"css": true
12+
}
13+
]
14+
]
15+
}

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎README.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# PrismJS Tutorial using React, Webpack and Babel
2+
3+
This is a tutorial on how to use PrismJS with React. It's a basic tutorial on how to get stated with prismjs in react. I will be adding adding more functionalities to this repo to demonstrate the use of Plugins, extending Prism or new languages, writing a regex etc. Stay tuned and checkout https://itsmycode.com for more details/

‎build/index.bundle.js

Lines changed: 378 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<title>PrismJS Tutorial</title>
11+
<script defer src="index.bundle.js"></script></head>
12+
<body>
13+
<noscript> You need to enable JavaScript to run this app. </noscript>
14+
<div id="root">
15+
<!-- This div is where our app will run -->
16+
</div>
17+
</body>
18+
</html>

‎package-lock.json

Lines changed: 6487 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "prism-js-tutorial",
3+
"version": "1.0.0",
4+
"description": "PrismJS React Tutorial ",
5+
"main": "index.js",
6+
"scripts": {
7+
"webpack": "webpack",
8+
"start": "webpack serve",
9+
"test": "echo \"Error: no test specified\" && exit 1"
10+
},
11+
"author": "Srinivas Ramakrishna",
12+
"license": "MIT",
13+
"devDependencies": {
14+
"@babel/core": "^7.13.1",
15+
"@babel/preset-env": "^7.13.5",
16+
"@babel/preset-react": "^7.12.13",
17+
"babel-loader": "^8.2.2",
18+
"css-loader": "^5.1.0",
19+
"file-loader": "^6.2.0",
20+
"html-webpack-plugin": "^5.2.0",
21+
"path": "^0.12.7",
22+
"style-loader": "^2.0.0",
23+
"webpack": "^5.24.2",
24+
"webpack-cli": "^4.5.0",
25+
"webpack-dev-server": "^3.11.2"
26+
},
27+
"dependencies": {
28+
"babel-plugin-prismjs": "^2.1.0",
29+
"prismjs": "^1.25.0",
30+
"react": "^17.0.1",
31+
"react-dom": "^17.0.1"
32+
}
33+
}

‎src/App.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import Code from "./components/Code";
3+
4+
const JSCode = `const App = props => {
5+
return (
6+
<div>
7+
<h1> Prism JS </h1>
8+
<div>Awesome Syntax Highlighter</div>
9+
</div>
10+
);
11+
};
12+
`;
13+
14+
const htmlCode = `
15+
<div>
16+
<h1> PrismJS Tutorial </h1>
17+
<p>
18+
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.
19+
</p>
20+
</div>
21+
`;
22+
23+
export default function App() {
24+
return (
25+
<div className="App">
26+
<Code code={JSCode} language="javascript" />
27+
<Code code={htmlCode} language="html" />
28+
</div>
29+
);
30+
}

‎src/components/Code.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React, { useEffect } from "react";
2+
import Prism from "prismjs";
3+
4+
export default function Code({ code, language }) {
5+
useEffect(() => {
6+
Prism.highlightAll();
7+
}, []);
8+
return (
9+
<div className="Code">
10+
<h2> Code Syntax Block {language}</h2>
11+
<pre>
12+
<code className={`language-${language}`}>{code}</code>
13+
</pre>
14+
</div>
15+
);
16+
}

‎src/index.css

Whitespace-only changes.

‎src/index.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<title>PrismJS Tutorial</title>
11+
</head>
12+
<body>
13+
<noscript> You need to enable JavaScript to run this app. </noscript>
14+
<div id="root">
15+
<!-- This div is where our app will run -->
16+
</div>
17+
</body>
18+
</html>

‎src/index.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import App from "./App";
4+
import "./index.css";
5+
6+
ReactDOM.render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>,
10+
document.getElementById("root")
11+
);

‎src/styles/HelloWorld.css

Whitespace-only changes.

‎src/styles/RenderForm.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.input-form {
2+
margin: 1rem;
3+
}
4+
5+
.input-fields {
6+
margin-left: 1rem;
7+
margin-bottom: 1rem;
8+
}

‎webpack.config.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const path = require("path");
2+
const HtmlWebpackPlugin = require("html-webpack-plugin");
3+
4+
module.exports = {
5+
entry: path.join(__dirname, "src", "index.js"),
6+
output: { path: path.join(__dirname, "build"), filename: "index.bundle.js" },
7+
mode: process.env.NODE_ENV || "development",
8+
resolve: { modules: [path.resolve(__dirname, "src"), "node_modules"] },
9+
devServer: { contentBase: path.join(__dirname, "src") },
10+
module: {
11+
rules: [
12+
{
13+
test: /\.(js|jsx)$/,
14+
exclude: /node_modules/,
15+
use: ["babel-loader"],
16+
},
17+
{
18+
test: /\.(css|scss)$/,
19+
use: ["style-loader", "css-loader"],
20+
},
21+
{
22+
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
23+
use: ["file-loader"],
24+
},
25+
],
26+
},
27+
plugins: [
28+
new HtmlWebpackPlugin({
29+
template: path.join(__dirname, "src", "index.html"),
30+
}),
31+
],
32+
};

0 commit comments

Comments
 (0)