Skip to content
This repository was archived by the owner on Nov 10, 2023. It is now read-only.

Commit 927b591

Browse files
webdevnerdstuffwebdevnerdstuff
authored
Merge pull request #1 from webdevnerdstuff/old-version
Old version
2 parents e8cd85c + 4c58d3b commit 927b591

File tree

6 files changed

+83
-400
lines changed

6 files changed

+83
-400
lines changed

‎README.md

+6-34
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,21 @@
77
</p>
88

99
<p align="center">
10-
<a href="https://www.npmjs.com/package/vue3-code-block">
11-
<img src="https://img.shields.io/npm/v/vue3-code-block?color=1867c0&logo=npm" alt="NPM Package">
10+
<a href="https://www.npmjs.com/package/@wdns/vue-code-block">
11+
<img src="https://img.shields.io/npm/v/@wdns/vue-code-block?color=1867c0&logo=npm" alt="NPM Package">
1212
</a>
1313
&nbsp;
1414
<a href="https://github.com/webdevnerdstuff/vue3-code-block">
1515
<img src="https://img.shields.io/badge/GitHub-WebDevNerdStuff-brightgreen.svg?logo=github" alt="@WebDevNerdStuff">
1616
</a>
1717
</p>
1818

19+
## Important Information
1920

20-
## Description
21-
22-
The Vue 3 CodeBlock component leverages the power of [PrismJS](https://prismjs.com/) or [Highlight.js](https://highlightjs.org/) to provide syntax highlighting for code blocks within your application. The component takes a prop, which is the code to be highlighted, and uses PrismJS or Highlight.js to render the code with syntax highlighting. The component supports a variety of programming languages and can be customized with different themes to match your application's design. With this component, your users can display their code snippets with ease and clarity, making it easier to share and collaborate on code within your application.
23-
24-
25-
## Installation
26-
27-
Using [pnpm](https://pnpm.io/):
28-
```
29-
pnpm add vue3-code-block
30-
```
31-
32-
Using npm:
33-
```
34-
npm i vue3-code-block
35-
```
36-
37-
## Documentation
38-
39-
[Documentation & Demo](https://webdevnerdstuff.github.io/vue3-code-block/)
40-
41-
## Dependencies
42-
43-
[PrismJS](https://prismjs.com/)
44-
[Highlight.js](https://highlightjs.org/)
45-
[Vue 3](https://vuejs.org/)
46-
[UAParser.js](https://www.npmjs.com/package/ua-parser-js)
47-
48-
49-
## Change Log
50-
51-
[CHANGELOG](https://github.com/webdevnerdstuff/vue3-code-block/blob/main/CHANGELOG.md)
21+
This repository and npm package has been depreciated.
5222

23+
You can find the new repository [here](https://github.com/webdevnerdstuff/vue-code-block)
24+
You can find the new NPM package [here](https://www.npmjs.com/package/@wdns/vue-code-block)
5325

5426
## License
5527

‎package.json

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
{
2-
"name": "@wdns/vue3-code-block",
2+
"name": "vue3-code-block",
33
"version": "2.2.14",
44
"description": "Vue 3 CodeBlock - Highlight your code with ease using this syntax highlighting component powered by PrismJS or Highlight.js.",
55
"private": false,
6-
"publishConfig": {
7-
"access": "public"
8-
},
96
"main": "dist/vue3-code-block.cjs.js",
107
"module": "dist/vue3-code-block.es.js",
118
"types": "dist/types/index.d.ts",

‎src/App.vue

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<template>
2-
<NavBar :selected-library="selectedLibrary" />
3-
<DemoPage @changedLibrary="updateLibrary" />
2+
<NavBar />
3+
<DemoPage />
44
<FooterBar />
55
</template>
66

77
<script setup lang="ts">
8-
import { ref, provide } from 'vue';
8+
import { provide } from 'vue';
99
import { useCoreStore } from '@/stores/index';
1010
import DemoPage from '@/components/DemoPage.vue';
1111
import NavBar from '@/components/Layout/NavBar.vue';
@@ -21,24 +21,24 @@ provide('styleData', {
2121
});
2222
2323
const store = useCoreStore();
24-
const selectedLibrary = ref({});
2524
2625
provide('links', store.links);
2726
provide('highlightJsLinks', store.highlightJsLinks);
2827
provide('prismLinks', store.prismLinks);
2928
30-
const codeBlockOptions = ref({
31-
browserWindow: false,
32-
preHeight: '30em',
33-
});
29+
</script>
3430

35-
provide('codeBlockOptions', codeBlockOptions);
3631

37-
function updateLibrary(library) {
38-
selectedLibrary.value = library.value;
32+
<style>
33+
html,
34+
body {
35+
height: 100%;
3936
}
40-
</script>
4137
42-
43-
<style scoped>
38+
#app {
39+
display: flex;
40+
flex-direction: column;
41+
height: 100%;
42+
justify-content: space-between;
43+
}
4444
</style>

‎src/components/DemoPage.vue

+39-206
Original file line numberDiff line numberDiff line change
@@ -1,218 +1,48 @@
11
<template>
2-
<div class="container mb-5">
3-
<div class="row mb-4">
4-
<div class="col-12 text-center">
5-
<img alt="Vue" class="vue-logo" src="../assets/vue.svg" />
2+
<div class="main-container">
3+
<div class="container mt-5 mb-5">
4+
<div class="row mb-4">
5+
<div class="col-12 text-center">
6+
<img
7+
alt="Vue"
8+
class="vue-logo"
9+
src="../assets/vue.svg"
10+
/>
11+
</div>
612
</div>
7-
</div>
8-
<div class="row mb-3">
9-
<div class="col-12 text-center">
10-
<h1>Vue 3 CodeBlock</h1>
11-
</div>
12-
<div class="col-12 text-center">
13-
<span class="badge bg-secondary rounded-pill">{{ version }}</span>
13+
<div class="row mb-3">
14+
<div class="col-12 text-center">
15+
<h1>Vue 3 CodeBlock</h1>
16+
</div>
1417
</div>
1518
</div>
16-
</div>
1719

18-
<div class="container mb-5">
19-
<div class="row">
20-
<div class="col-12">
21-
<p>
22-
The Vue 3 CodeBlock component leverages the power of
23-
<a :href="prismLinks.homepage" target="_blank">PrismJS</a>
24-
or
25-
<a :href="highlightJsLinks.homepage" target="_blank">Highlight.js</a>
26-
to provide syntax highlighting for code blocks within your
27-
application. The component takes a prop, which is the code to be
28-
highlighted, and uses PrismJS or Highlight.js to render the code with
29-
syntax highlighting. The component supports a variety of programming
30-
languages and can be customized with different themes to match your
31-
application's design. With this component, your users can display
32-
their code snippets with ease and clarity, making it easier to share
33-
and collaborate on code within your application.
34-
</p>
20+
<div class="container mb-5">
21+
<div class="row">
22+
<div class="col-12 text-center">
23+
<h2 class="text-danger ">Important Information!</h2>
24+
<p class="mb-5">
25+
This repository and npm package has been changed.
26+
</p>
27+
<p class="mb-5">
28+
You can find the new repository here:
29+
<br />
30+
<a :href="links.github">{{ links.github }}</a>
31+
</p>
32+
<p>
33+
You can find the new NPM package here:
34+
<br />
35+
<a :href="links.npm">{{ links.npm }}</a>
36+
</p>
37+
</div>
3538
</div>
3639
</div>
37-
<hr />
38-
<div class="row">
39-
<div class="col-12 mb-3">
40-
<h5>Switch between PrismJS and Highlight.js</h5>
41-
42-
<small
43-
class="d-inline-flex align-items-center px-2 py-1 fw-semibold text-success-emphasis bg-success-subtle border border-success-subtle rounded-2"
44-
>
45-
<fa-icon class="text-success me-1" icon="fa-solid fa-circle-info" />
46-
This will also update the examples and documentation below.
47-
</small>
48-
</div>
49-
<div class="col-12 col-md-3 mb-3">
50-
<select
51-
aria-label="Library Selection"
52-
class="form-select"
53-
@change="changeLibrary($event.target.value)"
54-
>
55-
<option
56-
v-for="lib in libraries"
57-
:key="lib"
58-
:selected="library === lib.id"
59-
:value="lib.id"
60-
>
61-
{{ lib.label }}
62-
</option>
63-
</select>
64-
</div>
65-
</div>
66-
<div class="row">
67-
<div class="col-12 col-md-3">
68-
<label class="form-label" for="theme-selection-select"
69-
>Select Theme:</label
70-
>
71-
72-
<select
73-
id="theme-selection-select"
74-
aria-label="Theme Selection"
75-
class="form-select"
76-
@change="changeTheme($event.target.value)"
77-
>
78-
<option
79-
v-for="theme in selectOptions"
80-
:key="theme"
81-
:selected="selectedTheme === theme.value"
82-
:value="theme.value"
83-
>
84-
{{ theme.label }}
85-
</option>
86-
</select>
87-
</div>
88-
</div>
89-
</div>
90-
91-
<div class="container">
92-
<!-- ============================================== Installation -->
93-
<InstallationSection id="ul-installation" />
94-
95-
<!-- ============================================== Register -->
96-
<RegisterSection id="ul-register-plugin" />
97-
98-
<!-- ============================================== Usage -->
99-
<UsageSection id="ul-usage" />
100-
101-
<!-- ============================================== Props -->
102-
<PropsSection id="ul-props" />
103-
104-
<!-- ============================================== Props -->
105-
<ThemesSection id="ul-themes" />
106-
107-
<!-- ============================================== Events -->
108-
<EventsSection id="ul-events" />
109-
110-
<!-- ============================================== Slots -->
111-
<SlotsSection id="ul-slots" />
112-
113-
<!-- ============================================== Examples -->
114-
<ExamplesSection id="ul-examples" />
115-
116-
<!-- ============================================== CSS Variables -->
117-
<CssVariablesSection id="ul-css-vars" />
118-
119-
<!-- ============================================== Dependencies -->
120-
<DependenciesSection id="ul-dependencies" />
121-
122-
<!-- ============================================== Change Log -->
123-
<ChangeLogSection id="ul-change-log" />
124-
125-
<!-- ============================================== License -->
126-
<LicenseSection id="ul-license" />
12740
</div>
12841
</template>
12942

130-
<script setup lang='ts'>
131-
/* eslint-disable no-unused-vars */
132-
/* eslint-disable @typescript-eslint/no-unused-vars */
133-
import {
134-
inject,
135-
onBeforeMount,
136-
provide,
137-
reactive,
138-
ref,
139-
} from 'vue';
140-
import { useCoreStore } from '@/stores/index';
141-
import { version } from '../../package';
142-
import {
143-
ChangeLogSection,
144-
CssVariablesSection,
145-
DependenciesSection,
146-
EventsSection,
147-
ExamplesSection,
148-
InstallationSection,
149-
LicenseSection,
150-
PropsSection,
151-
RegisterSection,
152-
SlotsSection,
153-
ThemesSection,
154-
UsageSection,
155-
} from '@/components/Sections/';
156-
import Prism from 'prismjs';
157-
import 'prismjs/components/prism-typescript';
158-
import 'prismjs/components/prism-json';
159-
import 'prismjs/components/prism-markup-templating';
160-
import 'prismjs/components/prism-php';
161-
import 'prismjs/plugins/line-numbers/prism-line-numbers.js';
162-
import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
163-
164-
165-
const highlightJsLinks = inject('highlightJsLinks');
166-
const prismLinks = inject('prismLinks');
167-
168-
const store = useCoreStore();
169-
const library = ref('prism');
170-
const libraries = store.libraries;
171-
172-
const highlightThemes = store.highlightThemes;
173-
const neonBunnyThemes = store.neonBunnyThemes;
174-
const prismThemes = store.prismThemes;
175-
const selectOptions = ref(null);
176-
const selectedLibrary = ref(libraries.prism);
177-
const selectedTheme = ref('neon-bunny');
178-
179-
180-
onBeforeMount(() => {
181-
library.value = store.getLocalStorage() ?? store.setLocalStorage('prism');
182-
changeLibrary(library.value);
183-
});
184-
185-
const emit = defineEmits(['changedLibrary']);
186-
187-
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
188-
189-
provide('selectedTheme', selectedTheme);
190-
provide('selectedLibrary', selectedLibrary);
191-
192-
if (library.value === 'highlightjs') {
193-
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
194-
selectedLibrary.value = libraries.highlightjs;
195-
}
196-
197-
function changeLibrary(val) {
198-
library.value = val;
199-
selectedLibrary.value = libraries[val];
200-
selectedTheme.value = 'neon-bunny';
201-
202-
store.setLocalStorage(library.value);
203-
emit('changedLibrary', selectedLibrary);
204-
205-
if (val === 'prism') {
206-
selectOptions.value = [...neonBunnyThemes, ...prismThemes];
207-
return;
208-
}
209-
210-
selectOptions.value = [...neonBunnyThemes, ...highlightThemes];
211-
}
212-
213-
function changeTheme(val) {
214-
selectedTheme.value = val;
215-
}
43+
<script setup>
44+
import { inject } from 'vue';
45+
const links = inject('links');
21646
</script>
21747

21848

@@ -241,7 +71,6 @@ h1 {
24171
}
24272
24373
h2 {
244-
border-bottom: 1px solid #ccc;
24574
font-size: 2rem;
24675
font-weight: 400;
24776
padding-bottom: 0.5rem;
@@ -251,6 +80,10 @@ h5 {
25180
font-weight: 600;
25281
}
25382
83+
.main-container {
84+
height: 100%;
85+
}
86+
25487
.vue-logo {
25588
width: 80px;
25689
}

0 commit comments

Comments
 (0)