vue-code-highlight - npm Package Compare versions

Comparing version 0.5.5 to 0.6.0

dist/vue-code-highlight.esm.js

@@ -768,5 +768,5 @@ /* eslint-disable */
 
-(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" pre[class*=\"language-\"][data-v-23ac0a9e] { display: inline-block; padding-right: 10em; padding-top: 3rem; border-radius: 6px; background-image: url(\"./assets/window-controls.svg\"); background-repeat: no-repeat; background-position: 16px 16px; box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75); } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" @import '../themes/window.css'; "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
 
-var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],_scopeId: 'data-v-23ac0a9e',
+var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],
   name: 'code-highlight',
@@ -773,0 +773,0 @@ props: {

dist/vue-code-highlight.min.js

@@ -771,5 +771,5 @@ var vueCodeHighlight = (function (exports) {
 
-	(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" pre[class*=\"language-\"][data-v-23ac0a9e] { display: inline-block; padding-right: 10em; padding-top: 3rem; border-radius: 6px; background-image: url(\"./assets/window-controls.svg\"); background-repeat: no-repeat; background-position: 16px 16px; box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75); } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+	(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" @import '../themes/window.css'; "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
 
-	var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],_scopeId: 'data-v-23ac0a9e',
+	var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],
 	  name: 'code-highlight',
@@ -776,0 +776,0 @@ props: {

dist/vue-code-highlight.umd.js

@@ -774,5 +774,5 @@ (function (global, factory) {
 
-	(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" pre[class*=\"language-\"][data-v-23ac0a9e] { display: inline-block; padding-right: 10em; padding-top: 3rem; border-radius: 6px; background-image: url(\"./assets/window-controls.svg\"); background-repeat: no-repeat; background-position: 16px 16px; box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75); } "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
+	(function(){ if(typeof document !== 'undefined'){ var head=document.head||document.getElementsByTagName('head')[0], style=document.createElement('style'), css=" @import '../themes/window.css'; "; style.type='text/css'; if (style.styleSheet){ style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } head.appendChild(style); } })();
 
-	var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],_scopeId: 'data-v-23ac0a9e',
+	var CodeHighlight = {render: function(){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:"codeBlock"},[_c('pre',{class:_vm.languageClass},[_vm._v("    "),_c('code',[_vm._v("\n      "),_vm._t("default"),_vm._v("\n    ")],2),_vm._v("\n  ")])])},staticRenderFns: [],
 	  name: 'code-highlight',
@@ -779,0 +779,0 @@ props: {

package.json

 {
   "name": "vue-code-highlight",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "author": "Jan Bílek",
@@ -5,0 +5,0 @@ "email": "[e-mail]",

README.md

@@ -6,5 +6,60 @@ # vue-code-highlight
 ## Usage
-Work in progress.
 
+```
+npm install vue-code-highlight --save
+```
+
+Now, you can use this module in two diferrent ways, as a component or as a directive.
+
+### Component
+In any component:
+
+```
+// You have to extract the component from the module
+import { component as VueCodeHighlight } from 'vue-code-highlight';
+
+components:{
+  VueCodeHighlight,
+  ...
+}
+```
+
+```
+<vue-code-highlight>
+ //Paste your code here
+</vue-code-highlight>
+```
+Window styles are already present in a component mode, but you will need to select and include a theme to properly highlight your code. (See the themes section.)
+
+### Directive
+In your main file:
+```js
+import VueCodeHighlight from 'vue-code-highlight';
+
+Vue.use(VueCodeHighlight) //registers the v-highlight directive
+
+```
+And then in any Vue component:
+
+```html
+<article v-highlight >
+ ...
+</article>
+```
+Every node under the article component having the following structure will be syntax highlighted.
+
+```html
+<pre class="language-javascript">
+  <code>
+    //your code goes here
+  </code>
+</pre>
+```
+To give the highlighter a window look in a directive mode, also don't forget to include the `./node_modules/vue-code-highlight/themes/window.css` file somewhere in your app.
+
+### Themes
+In order to visually higlight your code, you need to select a theme from `./node_modules/vue-code-highlight/themes/` and import it somewhere into your component/application. These are just regular prism themes, so feel free to improvise.
+
+
 ## Examples:
-![screenshot](/src/assets/screenshot.png)
+![screenshot](/src/public/screenshot.png)

No alert changes

Improved metrics

Total package byte prevSize

736990

3.18%

Number of lines in readme file

65

550%

Worsened metrics

Number of package files

37

-15.91%

Lines of code

3675

-23.83%

No dependency changes