how to create snippet in sublime text 2 - sublimetext2

<snippet>
<content>
<!doctype html>
<html>
<head>
<style type = "text/css">
</style>
</head>
<body>
<script type = "text/javascript">
</script>
</body>
</html>
</content>
<tabTrigger>html_t</tabTrigger>
<description>html_css_javascript</description>
<scope>html</scope>
</snippet>
when i save it as h.sublime-snippet, I get the error "No content for Snippet Packages /User/h.sublime-snippet"


<snippet>
<content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
If you compare yours to the code in this example, you will see that yours is missing some key components -- e.g., <![CDATA[ then your html code and then ]]>


This is an example to make a snippet(html comment), triggered by tapping c+tab :
<snippet>
<content><![CDATA <!-- ${1:comment} -->]</content>
<!-- Optional: Tab trigger to activate the snippet -->
<tabTrigger>c</tabTrigger>
<description>Snippet to make fast html comment</description>
</snippet>

Related

How to dynamically change the theme using highlight.js?

I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?

If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>

There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)

how to inject javascript at header and body using gulp

I want to inject javascript library inside head tag and my customized and my own code at body using GULP.
For Example:
<html>
<head>
<!-- injectJS -->
<script src="jquery.js">
<script src="d3.js">
<!-- injected -->
</head>
<body>
<!-- injectJS -->
<script src="index.js">
<!-- injected -->
</body>
</html>

I've been using gulp-template to do exactly this. Your index.html would then have to be adjusted. e.g.:
<% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>" inline></script>
<% }); %>
In this example your gulpfile task would look something like:
gulp.task('index', () =>
gulp.src('src/index.html')
.pipe(template({scripts: ['script.js', 'another-one.js']}))
.pipe(gulp.dest('dist'))
);
Another way to achieve this would be using gulp-inject. I prefer gulp-template though.

What HTML That Doesn't Show HTML Tags?

Few days ago, I visited a site, and for no reason I tried to view its source code. And surprisingly, it doesn't contain regular HTML tags such as h1, h2, p, etc.
it only contains code like this :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
if (window.PerformanceObserver) {
var observer = new PerformanceObserver(function(list) {
const entries = list.getEntries();
for (var i=0; i<entries.length; i++) {
var entry = entries[i];
// `name` will be either 'first-paint' or 'first-contentful-paint'.
var metricName = entry.name;
var time = Math.round(entry.startTime + entry.duration);
ga('send', {
hitType: 'timing',
timingCategory: 'Performance Metrics',
timingVar: metricName,
timingValue: time,
});
}
});
observer.observe({entryTypes: ['paint']});
}
</script>
<!-- Open search -->
<link type="application/opensearchdescription+xml" rel="search"
href="./assets/opensearch-id.xml"/>
<script>dataLayer = [];</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WJZQSJF');</script>
<!-- End Google Tag Manager -->
<link href="***/assets/bundle.f4eb17af99f6bcda6c58794466a0abd3.css" rel="stylesheet"></head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJZQSJF"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<div id="main"></div>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
</script>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->
<!-- Criteo One Tag Code -->
<script type="text/javascript" src="//*******" async="true"></script>
<script>window.criteo_q = window.criteo_q || [];</script>
<!-- End Criteo Code -->
<script>!function(e){function c(a){if(b[a])return b[a].exports;var d=b[a]={i:a,l:!1,exports:{}};return e[a].call(d.exports,d,d.exports,c),d.l=!0,d.exports}var a=window.webpackJsonp;window.webpackJsonp=function(b,f,n){for(var r,t,o,i=0,u=[];i<b.length;i++)t=b[i],d[t]&&u.push(d[t][0]),d[t]=0;for(r in f)Object.prototype.hasOwnProperty.call(f,r)&&(e[r]=f[r]);for(a&&a(b,f,n);u.length;)u.shift()();if(n)for(i=0;i<n.length;i++)o=c(c.s=n[i]);return o};var b={},d={74:0};c.e=function(e){function a(){r.onerror=r.onload=null,clearTimeout(t);var c=d[e];0!==c&&(c&&c[1](new Error("Loading chunk "+e+" failed.")),d[e]=void 0)}var b=d[e];if(0===b)return new Promise(function(e){e()});if(b)return b[2];var f=new Promise(function(c,a){b=d[e]=[c,a]});b[2]=f;var n=document.getElementsByTagName("head")[0],r=document.createElement("script");r.type="text/javascript",r.charset="utf-8",r.async=!0,r.timeout=12e4,c.nc&&r.setAttribute("nonce",c.nc),r.src=c.p+""+({61:"vendor",62:"bundle",63:"icons",64:"short_url"}[e]||e)+".bundle."+{0:"c38a1529c3b99c325cbb",1:"36418a346d47b7489609",2:"ef74eff3789cd571abc8",3:"40b845bf76f300f55de4",4:"8a6a439aa451d3d927b0",5:"72986b428e8cbd866607",6:"c6c9571f8e2fe5d212bb",7:"aae34ad175b103ef7e4e",8:"242c59a9d553de716c60",9:"ef6bbc1570fb8834ab36",10:"4bbc0a828f9c224773d1",11:"ddb3f50d8864e9408fc1",12:"6c1497f53303248323d7",13:"afeda231b24bbc8194de",14:"a87b72a437d706639baf",15:"09604bb7d99977b19574",16:"2a88b519fe8a5231bed8",17:"8752912c6b561ea445e5",18:"1bc4d82776cf99767789",19:"a2333c0fb5928e5c8294",20:"5b3a12ea7ea8144d0b40",21:"84073184bb3f2047b2a7",22:"20b45cf24e9ba43bfeb9",23:"cd0ea9678da108d1f4ce",24:"cd3c35192890404fa9f8",25:"5eb5420abef187dc2df6",26:"18f747b4b8c098ff19f7",27:"669314a53c5cfe3c73d6",28:"ebcb097c69b716623654",29:"ac9eccdcdb242cc2aef8",30:"5e109d633d36dcbba47f",31:"5a7027b9dfa01f78bf70",32:"61e7dceb5b3a30078d83",33:"4fee29baa1d2816fdae7",34:"cc8761150451212c4a22",35:"b17ad377b0cb1ef37461",36:"66899702ab02bf7a6339",37:"bf88a5c916c22b7dd322",38:"0f8294f2a9a2e2e1ffeb",39:"dc558711f648a8ae4fc6",40:"aa5362b270c5e5c12cb8",41:"53574e3109dc0721b45b",42:"e7d39f00425207d8b5b0",43:"b1cdc408800853db7b1a",44:"90e7fdfc599c75ed6c00",45:"33db36c7330b10227972",46:"830b163b775b656e3a92",47:"03bfb3bbdd79ee0e0442",48:"e0548b8051ef72fb0e4f",49:"a14357c795d7bc1913cd",50:"ed0bec3efe20b2dc2da1",51:"76f7f508111c9d32ea1e",52:"ce6f96656a3b08a5f978",53:"dbce6a5f7c10fc5bda8b",54:"00e18ead99250bf63f01",55:"04d3bb1b65d42a9fdaf4",56:"1a12a992adc0cc13f856",57:"5fe4d3c577315f8f99a2",58:"bcd10412dcbab2259da4",59:"c8db0c00ea4034701abc",60:"d33e9ca4f6d41e01d92c",61:"8ee65c855117c2ea0d78",62:"7d31cc04d88c6681ce75",63:"d2dcedabc8faa5a71473",64:"e66827895350ae2fac63",65:"230b7a8a1670edc8e52c",66:"33b35d4cbdffc7271758",67:"6a55b5d11720b6d975ad",68:"7d28f6e0272beec18917",69:"91c610b55fa27ae0d91c",70:"4c240b9a04ec67a27235",71:"54531e628f75037462bd",72:"f6a6e9ff0ab728eabca1",73:"3d7f47216be8efeca29b"}[e]+".js";var t=setTimeout(a,12e4);return r.onerror=r.onload=a,n.appendChild(r),f},c.m=e,c.c=b,c.d=function(e,a,b){c.o(e,a)||Object.defineProperty(e,a,{configurable:!1,enumerable:!0,get:b})},c.n=function(e){var a=e&&e.__esModule?function(){return e.default}:function(){return e};return c.d(a,"a",a),a},c.o=function(e,c){return Object.prototype.hasOwnProperty.call(e,c)},c.p="https://cdngarenanow-a.akamaihd.net/shopee/shopee-pcmall-live-id/assets/",c.oe=function(e){throw e}}([]);
</script>
<script type="text/javascript" src="https://***/vendor.8ee65c855117c2ea0d78.js"></script><script type="text/javascript" src="https://***/assets/icons.d2dcedabc8faa5a71473.js"></script><script type="text/javascript" src="https://***/assets/bundle.7d31cc04d88c6681ce75.js"></script><script type="text/javascript" src="https://***/assets/short_url.e66827895350ae2fac63.js"></script></body>
</html>
what programming language / technique is this? it shows all the content on my browser, but the html tags remains invisible. any idea what it is?

That's some straight up Javascript you're seeing there, and the code running will be generating all the necessary tags client side (hence why viewing the source doesn't show them).
Try right-clicking on an element and using "Inspect". That should open the browser's dev tools and show the HTML code the Javascript is generating.

Is it possible to ignore some lines in html on building html with Gulp?

I have a html setup in my app folder and this is copied in the dist folder by gulp.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../dist/css/style.css">
</head>
<body ng-app="myApp">
<div ui-view></div>
<!-- build:jsLib js/libs.js -->
<script src="../libs/angular-ui-router/release/angular-ui-router.js"></script>
<!-- endbuild -->
<!-- build:jsApp js/app.js -->
<script src="app.js"></script>
<!-- endbuild -->
<script src="../libs/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
</body>
</html>
That part is used to make fake service calls and I don't want it in deployment files:
//something like *ignore this*
<script type="text/javascript">
angular.module('testApp', ['mockService', 'productServicesApp', 'ngMockE2E']);
</script>
Is is possible to ignore this line with gulp?

Yes this is possible. A nice plugin to do this would be the gulp-remove-code plugin.
Below is an example of how you would use it
HTML:
<div>
<!--removeIf(production)-->
<div class="sandbox-banner">Running in sandbox environment</div>
<!--endRemoveIf(production)-->
<span>Removing code is ready.</span>
</div>
GULP:
var gulp = require('gulp');
var removeCode = require('gulp-remove-code');
HTML_FILES = '/path/to/html/**/*.html';
gulp.task('clean-html', function() {
return gulp.src(HTML_FILES)
.pipe(removeCode({ production: true }))
.pipe(gulp.dest('dist/'));
});
And then you just call it by saying
gulp clean-html
Anything inside of those comment tags will be removed. Also, the object passed to removeCode is not namespace specific. So you can change the naming to whatever.

Gulp-Inject Positions

If I want to inject Js Files in diff. locations e.g. <head> here and here </body>. I need to set names like described here for the injections:
https://github.com/klei/gulp-inject#method-2-use-gulp-injects-name-option
<!-- head:js -->
<!-- only importantFile.js will be injected here -->
<!-- endinject -->
How can I modify this selector, that I don't have to name each file. E.g. take all files which contain *_important.js
.pipe(inject(gulp.src('./src/importantFile.js', {read: false}), {name: 'head'}))
And is there a better way. E.g. like adding s.th. inside the javascript file or name it like this orderModule.above.js, googleAnalytics.below.js

From the gulp documentation:
gulp.src(globs[, options]) - Emits files matching provided glob or an array of globs.
You therefore have tremendous freedom to define how you want to differentiate between "important" files and others.
.pipe(inject(gulp.src('*_important.js')))
.pipe(inject(gulp.src('*.head.js')))
etc. Then just provide the negation of this pattern in the second gulp.src call
.pipe(inject(gulp.src(['*.js', '!*_important.js'])))
.pipe(inject(gulp.src(['*.js', '!*.head.js'])))

gulp.task('dev', function () {
var target = gulp.src('./index.html');
return target
.pipe(inject(gulp.src('_MAIN_CSS_FILES_', {read: false})))
.pipe(inject(gulp.src('_BOWER_CSS_FILES_', {read: false}), {name: 'bower'}))
.pipe(inject(gulp.src('_MAIN_JS_FILES_', {read: false})))
.pipe(inject(gulp.src('_BOWER_JS_FILES_', {read: false}), {name: 'bower'}))
.pipe(gulp.dest("./dest/"));
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<!-- inject:css -->
<!-- built css files will go here... -->
<!-- endinject -->
<!-- bower:css -->
<!-- bower installed css files will go here... -->
<!-- endinject -->
</head>
<body>
<!-- bower:js -->
<!-- bower installed js files will go here... -->
<!-- endinject -->
<!-- inject:js -->
<!-- built js files will go here... -->
<!-- endinject -->
</body>
</html>