Sunday, August 28, 2016

Using outDir on Angular 2 QuickStart

I'm new to TypeScript version of Angular 2 and I'm following the tutorials from the web, particularly YouTube. One thing I noticed from some of the presenters' setup was that the transpiled code do not show in the editor. I'm curious on how to achieve the same setup as I want to hide the .map and .js files on the editor I'm using which is Visual Studio Code.

Some of the answers from StackOverflow suggests using .gitignore to hide the said files. Unfortunately, my limited knowledge and patience can't get the suggestion to work.

Another option I stumbled upon was to use outDir from the compilerOptions. The outDir option saves the transpiled code to a specified directory. I was able to successfully move the .map and .js files to the build directory using the tsconfig.json setting below:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "build"
  }
}

I'm testing using the Angular 2 QuickStart files from the link below: https://angular.io/docs/ts/latest/quickstart.html

The option for the outDir I've used above broke the code. Digging for answers I've finally got them to work. So to use outDir for the 5 minute QuickStart files, we have to modify both tsconfig.json and index.html to like the code below:

tsconfig.js
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "build/app"
  }
}

index.html
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 1. Load libraries -->
     <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('build/app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Now I can continue my Angular 2 TypeScript adventure without being distracted by unwanted files from my IDE of choice.

If this post helped you solve the same issue as I have, please let me know by posting a comment below.

Now back to coding...

Sunday, August 21, 2016

Setup PrismJS Syntax Highlighter to Blogger

If you are a coder and want to share your code to the world using Blogger, you'll notice that it does not come with a syntax highlighter. A syntax highlighter is a plugin/module/script that adds styles to code snippets to make them look presentable to the reader.

There are other websites such as Github's Gist, Plunker, Pastebin and etc that allows you to embed code in your blog. The SEO folks were concerned that strings shown in the embedded tag/frame will not be indexed by Google. They suggested that if you rely on your code to do the SEO talking, its better to paste your code on your blog and have it formatted by a syntax highlighter.

In this post, I'm going to show you how to setup PrismJS within Blogger. We are going to edit the Template > Edit HTML to add the PrismJS' CSS and JS files hosted from CDNJS.


First, copy the following lines and add them on top of the </head> tag.
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' type='text/javascript'/>

If you want to have line numbers on your code snippet, include the following lines as well.
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.js' type='text/javascript'/>

It should look like this:
    <b:include data='blog' name='google-analytics'/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/themes/prism.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js' type='text/javascript'/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/plugins/line-numbers/prism-line-numbers.min.js' type='text/javascript'/>
  </head>

To show how to use PrismJS, we're going to use a simple Hello World example written in HTML. First, ensure that the Post settings > Options > Compose mode is set to Show HTML literally, otherwise it will screw up the page formatting.


Paste the following code to the editing area, this will escape the strings automatically when composing in HTML mode.
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Switch to HTML mode using the button located at the top left of the page. Locate and enclose the escaped strings using the <pre> and <code> tags like the one below:
<pre class="language-markup line-numbers"><code>&lt;!DOCTYPE html&gt;<br />
&lt;html&gt;<br />
&nbsp; &lt;head&gt;<br />
&nbsp; &nbsp; &lt;link rel="stylesheet" href="style.css"&gt;<br />
&nbsp; &nbsp; &lt;script src="script.js"&gt;&lt;/script&gt;<br />
&nbsp; &lt;/head&gt;<br />
&nbsp; &lt;body&gt;<br />
&nbsp; &nbsp; &lt;h1&gt;Hello World!&lt;/h1&gt;<br />
&nbsp; &lt;/body&gt;<br />
&lt;/html&></code><pre>

It should produce the following output:
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

To add syntax highlighting to other languages not supported by the default prism.min.js, head over to CDNJS website and find CDNJS script file for the language that you need. In order to use that script file, you can visit the PrismJS here to know the naming convention for that language.




If this post helped you to use PrismJS syntax highlighting to your Blogger page, please let me know by posting a comment below.

Now back to coding...