diff --git a/index.html b/index.html
index 7eb4888..211026e 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,9 @@
Paste
@@ -21,9 +21,7 @@ npm/clipboard@2/dist/clipboard.min.js
type="text/css"
href="https://cdn.jsdelivr.net/npm/slim-select@1.25.0/dist/slimselect.min.css"
/>
-
-
-
+
@@ -36,7 +34,7 @@ npm/clipboard@2/dist/clipboard.min.js
-
+
diff --git a/index.js b/index.js
index f038978..74cb361 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,7 @@
let copyElement = document.getElementById('copy');
const flask = new CodeFlask('#editor', { language: 'javascript', lineNumbers: true, defaultTheme: false });
const lzma = new LZMA('lzma.min.js');
+Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/';
let select;
function init() {
@@ -17,14 +18,14 @@ function initLangSelector() {
select: '#language',
data: Object.entries(languages).map(([value, text]) => ({ text, value })),
showContent: 'up',
- onChange: () => {
- updateLanguage();
+ onChange: e => {
+ console.log(e.value);
+ flask.updateLanguage(e.value);
}
});
const urlParams = new URLSearchParams(window.location.search);
select.set(Object.keys(languages).indexOf(urlParams.get('lang')) === -1 ? 'javascript' : urlParams.get('lang'));
- updateLanguage();
}
function initCode() {
@@ -55,32 +56,6 @@ function initCode() {
});
}
-function updateLanguage() {
- const lang = select.selected();
- if (!Prism.languages.hasOwnProperty(lang)) {
- addLanguage(lang);
- return;
- }
- flask.updateLanguage(lang);
-}
-
-function addLanguage(lang) {
- // Add a setter to detect when a language is available
- Object.defineProperty(Prism.languages, lang, {
- set: function(val) {
- Prism.languages['_custom_' + lang] = val;
- flask.updateLanguage(lang);
- },
- get: function() {
- return Prism.languages['_custom_' + lang];
- }
- });
-
- const script = document.createElement('script');
- script.setAttribute('src', `https://cdn.jsdelivr.net/npm/prismjs@1.14.0/components/prism-${lang}.min.js`);
- document.getElementsByTagName('head')[0].appendChild(script);
-}
-
function generateLink() {
const code = flask.getCode();
lzma.compress(code, 1, function(compressed, error) {
diff --git a/theme.css b/style.css
similarity index 76%
rename from theme.css
rename to style.css
index f7552e0..7cef310 100644
--- a/theme.css
+++ b/style.css
@@ -1,4 +1,56 @@
-/* Code editor style */
+/* General app style */
+
+#editor,
+#footer,
+#copy {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+#editor {
+ top: 0;
+ bottom: 36px;
+}
+
+#footer,
+#copy {
+ height: 36px;
+ padding: 4px 20px 0 50px;
+ background-color: #3b3b47;
+}
+
+.d-inline-block {
+ display: inline-block;
+}
+
+.select-wrapper {
+ width: 300px;
+ font-size: 14px;
+ font-family: sans-serif;
+}
+.select-wrapper .ss-main .ss-single-selected {
+ height: 28px;
+}
+button {
+ cursor: pointer;
+ background-color: transparent;
+ color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 2px;
+ height: 28px;
+ padding: 4px 8px;
+}
+button:hover {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.codeflask textarea {
+ box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.3) inset;
+}
+
+/* Code editor theme */
.codeflask {
color: #ccc;
@@ -15,20 +67,18 @@
.codeflask textarea::-moz-selection,
.codeflask textarea ::-moz-selection {
- text-shadow: none;
background-color: #5a5f80;
color: #5a5f80;
}
.codeflask textarea::selection,
.codeflask textarea ::selection {
- text-shadow: none;
background-color: #5a5f80;
color: #5a5f80;
}
-.codeflask__lines {
- background: #3b3b47;
+.codeflask.codeflask--has-line-numbers::before {
+ background: #3b3b47 !important;
}
.token.comment {
diff --git a/styles.css b/styles.css
deleted file mode 100644
index 4c0b8ec..0000000
--- a/styles.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* General app style */
-
-#editor,
-#footer,
-#copy {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
-}
-
-#editor {
- top: 0;
- bottom: 36px;
-}
-
-#footer,
-#copy {
- height: 36px;
- padding: 4px 20px 0 50px;
- background-color: #3b3b47;
-}
-
-.d-inline-block {
- display: inline-block;
-}
-
-.select-wrapper {
- width: 300px;
- font-size: 14px;
- font-family: sans-serif;
-}
-.select-wrapper .ss-main .ss-single-selected {
- height: 28px;
-}
-button {
- cursor: pointer;
-}