Skip to content

Commit ee1702f

Browse files
sinan-aydogansinan-aydogan
committed
Simple Syntax Highlighter lib added for code samples
1 parent 19ddfdf commit ee1702f

File tree

5 files changed

+140
-21
lines changed

5 files changed

+140
-21
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"@fortawesome/free-regular-svg-icons": "^5.15.3",
3333
"@fortawesome/free-solid-svg-icons": "^5.15.3",
3434
"@fortawesome/vue-fontawesome": "^2.0.2",
35+
"simple-syntax-highlighter": "^1.4.6",
3536
"tailwind-scrollbar": "^1.3.0"
3637
}
3738
}

‎resources/js/Pages/Samples/Components/Button.vue

Lines changed: 9 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,8 @@
2222
</div>
2323
</template>
2424
<template #secondContent>
25-
<pre v-highlightjs="sampleCodes.code1" class="w-full">
26-
<code class="html">
27-
</code>
28-
</pre>
29-
<span class="border bg-gray-100 p-2 flex my-2">
25+
<ssh-pre copy-button="true" class="w-full" style="margin-top: 10px; padding: 10px" language="html" label="Code">{{sampleCodes.code1}}</ssh-pre>
26+
<span class="border bg-gray-100 p-2 flex my-2">
3027
You can add a attribute which "color" for button color.
3128
<em class="ml-2"> Color variations: <b>red, blue, indigo, yellow, green, gray, black, white</b></em>
3229
</span>
@@ -108,10 +105,7 @@
108105
</div>
109106
</template>
110107
<template #secondContent>
111-
<pre v-highlightjs="sampleCodes.code2" class="whitespace-pre-wrap">
112-
<code class="html">
113-
</code>
114-
</pre>
108+
<ssh-pre copy-button="true" class="w-full" style="margin-top: 10px; padding: 10px" language="html" label="Code">{{sampleCodes.code2}}</ssh-pre>
115109
</template>
116110
</t-contentCard>
117111
<!--With radius : Code 3-->
@@ -128,10 +122,8 @@
128122
</div>
129123
</template>
130124
<template #secondContent>
131-
<pre v-highlightjs="sampleCodes.code3" class="w-full">
132-
<code class="html">
133-
</code>
134-
</pre>
125+
<ssh-pre copy-button="true" class="w-full" style="margin-top: 10px; padding: 10px" language="html" label="Code">{{sampleCodes.code3}}</ssh-pre>
126+
135127
</template>
136128
</t-contentCard>
137129
<!--With Size : Code 4-->
@@ -147,10 +139,7 @@
147139
</div>
148140
</template>
149141
<template #secondContent>
150-
<pre v-highlightjs="sampleCodes.code4" class="w-full">
151-
<code class="html">
152-
</code>
153-
</pre>
142+
<ssh-pre copy-button="true" class="w-full" style="margin-top: 10px; padding: 10px" language="html" label="Code">{{sampleCodes.code4}}</ssh-pre>
154143
</template>
155144
</t-contentCard>
156145
</grid-section>
@@ -163,10 +152,12 @@ import AppLayout from "@/Layouts/AppLayout";
163152
import GridSection from "@/Layouts/GridSection";
164153
import TContentCard from "@/Components/Card/TContentCard";
165154
import TButton from "@/Components/Button/TButton";
155+
import SshPre from 'simple-syntax-highlighter'
156+
import 'simple-syntax-highlighter/dist/sshpre.css'
166157
167158
export default {
168159
name: "Button",
169-
components: {AppLayout, GridSection, TContentCard, TButton},
160+
components: {AppLayout, GridSection, TContentCard, TButton,SshPre},
170161
data() {
171162
return {
172163
sampleCodes: {

‎resources/js/Pages/Samples/FormElements/FormStructure.vue

Lines changed: 114 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@
4141
</t-input-group>
4242
</t-form-section>
4343
</t-form-content>
44+
<ssh-pre copy-button="true" language="html" label="Code">{{sampleCode.html}}</ssh-pre>
45+
<ssh-pre copy-button="true" language="js" label="JS">{{sampleCode.js}}</ssh-pre>
4446
</template>
4547
</app-layout>
4648
</template>
@@ -55,9 +57,11 @@ import TInputText from "@/Components/Form/Inputs/TInputText";
5557
import TInputDropdown from "@/Components/Form/Inputs/TInputDropdown";
5658
import TInputDropdownItem from "@/Components/Form/Inputs/TInputDropdownItem";
5759
import TInputTextArea from "@/Components/Form/Inputs/TInputTextArea";
60+
import SshPre from 'simple-syntax-highlighter'
61+
import 'simple-syntax-highlighter/dist/sshpre.css'
5862
export default {
5963
name: "FormStructure",
60-
components: {AppLayout,TButton,TFormSection,TFormContent,TInputGroup,TInputText,TInputDropdown,TInputDropdownItem,TInputTextArea},
64+
components: {AppLayout,TButton,TFormSection,TFormContent,TInputGroup,TInputText,TInputDropdown,TInputDropdownItem,TInputTextArea,SshPre},
6165
data() {
6266
return {
6367
loading: false,
@@ -73,7 +77,88 @@ export default {
7377
status: [
7478
{name: 'Passive', value: 0, icon: 'XIcon',class: 'w-5 h-5 text-red-500 mr-2'},
7579
{name: 'Active', value: 1, icon: 'Checked',class: 'w-5 h-5 text-green-500 mr-2'}
76-
]
80+
],
81+
sampleCode: {
82+
html:'<t-form-content @submitted="save" @reset="reset">\n' +
83+
' <t-form-section\n' +
84+
' title="Personal Infos"\n' +
85+
' description="This information is subject to personal data protection law.">\n' +
86+
' <!-- Name -->\n' +
87+
' <t-input-group label="Name" labelFor="name" class="col-span-12 md:col-span-6">\n' +
88+
' <t-input-text id="name" v-model="form.name" placeholder="Business mail address"/>\n' +
89+
' </t-input-group>\n' +
90+
' <!-- Tax ID -->\n' +
91+
' <t-input-group label="Tax ID" labelFor="tax_id" class="col-span-12 md:col-span-6">\n' +
92+
' <t-input-text id="tax_id" v-model="form.tax_id"/>\n' +
93+
' </t-input-group>\n' +
94+
' <!-- Phone -->\n' +
95+
' <t-input-group label="Phone" labelFor="phone" class="col-span-12 md:col-span-6">\n' +
96+
' <t-input-text id="phone" name="phone" v-model="form.phone" mask="+99(999) 999-9999" />\n' +
97+
' </t-input-group>\n' +
98+
' <!-- Email -->\n' +
99+
' <t-input-group label="Email" labelFor="email" class="col-span-12 md:col-span-6">\n' +
100+
' <t-input-text id="email" v-model="form.email"/>\n' +
101+
' </t-input-group>\n' +
102+
' <!-- Status -->\n' +
103+
' <t-input-group label="Status" labelFor="status" class="col-span-12 md:col-span-6">\n' +
104+
' <t-input-dropdown v-model="form.status" :clear-button="true">\n' +
105+
' <t-input-dropdown-item value="0"><font-awesome-icon icon="check" class="text-green-500 mr-2"/>Active</t-input-dropdown-item>\n' +
106+
' <t-input-dropdown-item value="1"><font-awesome-icon icon="minus-circle" class="text-red-500 mr-2"/>Passive</t-input-dropdown-item>\n' +
107+
' </t-input-dropdown>\n' +
108+
' </t-input-group>\n' +
109+
' <!-- Address -->\n' +
110+
' <t-input-group label="Address" labelFor="address" class="col-span-12">\n' +
111+
' <t-input-text-area id="address" v-model="form.address" :rows="3" :clear-button="true" :counter="true" placeholder="Full address"/>\n' +
112+
' </t-input-group>\n' +
113+
' </t-form-section>\n' +
114+
'</t-form-content>',
115+
js: 'import TFormSection from "@/Components/Form/TFormSection";\n' +
116+
'import TFormContent from "@/Components/Form/TFormContent";\n' +
117+
'import TInputGroup from "@/Components/Form/TInputGroup";\n' +
118+
'import TInputText from "@/Components/Form/Inputs/TInputText";\n' +
119+
'import TInputDropdown from "@/Components/Form/Inputs/TInputDropdown";\n' +
120+
'import TInputDropdownItem from "@/Components/Form/Inputs/TInputDropdownItem";\n' +
121+
'import TInputTextArea from "@/Components/Form/Inputs/TInputTextArea";\n' +
122+
'export default {\n' +
123+
' name: "FormStructure",\n' +
124+
' components: {TFormSection,TFormContent,TInputGroup,TInputText,TInputDropdown,TInputDropdownItem,TInputTextArea},\n' +
125+
' data() {\n' +
126+
' return {\n' +
127+
' loading: false,\n' +
128+
' form: this.$inertia.form({\n' +
129+
' _method: \'POST\',\n' +
130+
' name : null,\n' +
131+
' tax_id : null,\n' +
132+
' email : null,\n' +
133+
' phone : null,\n' +
134+
' status : null,\n' +
135+
' address : null,\n' +
136+
' }),\n' +
137+
' status: [\n' +
138+
' {name: \'Passive\', value: 0, icon: \'XIcon\',class: \'w-5 h-5 text-red-500 mr-2\'},\n' +
139+
' {name: \'Active\', value: 1, icon: \'Checked\',class: \'w-5 h-5 text-green-500 mr-2\'}\n' +
140+
' ],\n' +
141+
' };\n' +
142+
' },\n' +
143+
' methods: {\n' +
144+
' reset: function () {\n' +
145+
' this.form.name = null;\n' +
146+
' this.form.tax_id = null;\n' +
147+
' this.form.email = null;\n' +
148+
' this.form.phone = null;\n' +
149+
' this.form.status = null;\n' +
150+
' this.form.address = null;\n' +
151+
' },\n' +
152+
' save() {\n' +
153+
' this.form.post(route(\'customer.store\'), {\n' +
154+
' errorBag: \'customer\',\n' +
155+
' preserveScroll: true,\n' +
156+
' });\n' +
157+
' this.loading = true;\n' +
158+
' }\n' +
159+
' },\n' +
160+
'}\n'
161+
},
77162
};
78163
},
79164
methods: {
@@ -99,3 +184,30 @@ export default {
99184
<style scoped>
100185
101186
</style>
187+
188+
189+
190+
191+
192+
193+
194+
195+
196+
197+
198+
199+
200+
201+
202+
203+
204+
205+
206+
207+
208+
209+
210+
211+
212+
213+

‎resources/js/app.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,15 @@ import {
3939
faCheck, faMinusCircle
4040
} from '@fortawesome/free-solid-svg-icons'
4141
library.add(faRocket,faDotCircle,faWindowRestore,faEdit,faCalendarAlt,faEnvelope,faTasks,faWindowMaximize,faChartBar,faChevronDown,faCode,faAngleDown,faAngleUp,faChartBar,faLayerGroup,faGripHorizontal,faAngleLeft,faClock,faRetweet,faTags,faTv,faPlug,faTable,faShoppingBag,faLiraSign,faTrash,faPlusCircle,faAngleDoubleRight,faCheck,faMinusCircle)
42-
4342
Vue.component('font-awesome-icon', FontAwesomeIcon)
4443

44+
4545
Vue.mixin({ methods: { route } });
4646
Vue.use(InertiaPlugin);
4747
Vue.use(PortalVue);
4848

49+
Vue.config.productionTip = false
50+
4951

5052
const app = document.getElementById('app');
5153

‎vue.config.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
chainWebpack: config => {
3+
// Preserve white spaces for ssh-pre component.
4+
config.module
5+
.rule('vue')
6+
.use('vue-loader')
7+
.loader('vue-loader')
8+
.tap(options => {
9+
options.compilerOptions.whitespace = 'preserve'
10+
return options
11+
})
12+
}
13+
}

0 commit comments

Comments
 (0)