update and pre

Author: F-one-1

README.md

@@ -1,12 +1,30 @@
 {
   "name": "react-highlight-code",
-  "private": true,
-  "version": "0.0.0",
+  "private": false,
+  "version": "0.0.1",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview"
   },
+  "license": "MIT",
+  "main": "./dist/react-highlight-code.umd.js",
+  "module": "./dist/react-highlight-code.es.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/react-highlight-code.es.js",
+      "require": "./dist/react-highlight-code.umd.js"
+    },
+    "./dist/style.css": "./dist/style.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/F-one-1/react-highlight-code.git"
+  },
+  "homepage": "https://github.com/F-one-1/react-highlight-code",
   "dependencies": {
     "highlight.js": "^11.5.1",
     "react": "^18.0.0",
@@ -17,8 +35,19 @@
     "@types/react-dom": "^18.0.0",
     "@vitejs/plugin-react": "^1.3.0",
     "classnames": "^2.3.1",
+    "react-highlight-code": "^0.0.1",
     "sass": "^1.53.0",
     "sass-loader": "^13.0.0",
     "vite": "^2.9.9"
-  }
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "keywords": [
+    "highlight",
+    "react",
+    "component",
+    "highlight.js"
+  ]
 }

package.json

@@ -1,22 +1,34 @@
 import logo from './logo.svg'
 import './App.css'
-import { HighCode } from '../dist/react-highlight-code.es.js'
-import '../dist/style.css'
+// import { HighCode } from 'react-highlight-code'
+// import 'react-highlight-code/dist/style.css'
+import HighCode from './component/HighCode'
 function App() {
-  const height = '200px'
-  const value = `import { HighCode } from 'vue-highlight-code';
-import 'vue-highlight-code/dist/style.css';
-export default {
-    components: {
-      HighCode
-    },
-    data(){
-  
-    }
-}`
+  // const height = '200px'
+  const value = `import { HighCode } from 'react-highlight-code';
+import 'react-highlight-code/dist/style.css';
+const value = 'only one prop to show highlightCode using highlight.js'
+return (
+  <div className="wrapper">
+    <HighCode className="code" langName="jsx" codeValue={value}></HighCode>
+    <HighCode
+      className="code"
+      langName="javascript"
+      codeValue={value}
+      theme="light"
+    ></HighCode>
+  </div>
+)
+`
   return (
     <div className="wrapper">
-      <HighCode className="code" height={height} codeValue={value}></HighCode>
+      <HighCode className="code" langName="jsx" codeValue={value}></HighCode>
+      <HighCode
+        className="code"
+        langName="javascript"
+        codeValue={value}
+        theme="light"
+      ></HighCode>
     </div>
   )
 }

src/App.jsx

@@ -16,7 +16,7 @@ export default function HighCode(props) {
     width = '520px',
     height = '',
     maxWidth = '',
-    maxHeight = '',
+    maxHeight = '200px',
     scrollStyleBool = true,
     codeValue = '',
     fontSize = 16,
@@ -41,7 +41,7 @@ export default function HighCode(props) {
     [`language-${lang}`]: true,
   })
   const codeHighlight = useRef(null)
-
+  console.log(langName, props.langName, 'langName')
   useEffect(() => {
     // eslint-disable-next-line no-unused-expressions
     if (codeHighlight && codeHighlight.current) {
@@ -75,7 +75,7 @@ export default function HighCode(props) {
       }}
     >
       <div className="code_header">
-        {nameShow && <TypeShow TL={props.langName}></TypeShow>}
+        {nameShow && <TypeShow TL={langName || props.langName}></TypeShow>}
         {copy && <CopyCode codeValue={props.codeValue}></CopyCode>}
       </div>
       <div

src/component/HighCode.jsx

@@ -1,9 +1,10 @@
 import './style/TypeShow.scss'
 export default function TypeShow(props) {
-  const { langName = 'Bash' } = props
+  const { TL = 'js' } = props
+  console.log(props, 'props')
   return (
     <div className="TL">
-      <div className="TL_word">{langName}</div>
+      <div className="TL_word">{TL}</div>
     </div>
   )
 }

src/component/TypeShow.jsx

@@ -741,6 +741,15 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-highlight-code@^0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/react-highlight-code/-/react-highlight-code-0.0.1.tgz#939b8d42d29ad4f4726a096620d29232539ba14a"
+  integrity sha512-TJnrnqpnHk/utIUmUoLfo7GVsTuPVvr3Vel87bk8TkTrbGkSw1sIbqGVlbPzIOpdxYqQrU87YC+NgUmUJJfh6g==
+  dependencies:
+    highlight.js "^11.5.1"
+    react "^18.0.0"
+    react-dom "^18.0.0"
+
 react-refresh@^0.13.0:
   version "0.13.0"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.13.0.tgz#cbd01a4482a177a5da8d44c9755ebb1f26d5a1c1"