docs(scully): describe syntax highlighting

* docs(blog): describe syntax highlighting

* docs(scully): update text for include prism CSS

* docs(scully): separate syntax highlighting doc

* docs(scully): add paragraph with link to utils.md

Author: d-koppenhagen

docs/blog.md

@@ -6,7 +6,7 @@ We have a schematic that will add the necessary pieces to your project to enable
 Angular app.
 
 1. [Adding Blog Support](#adding-blog-support)
-2. [Generating New Blog Posts](#generating-new-blog-posts) 
+2. [Generating New Blog Posts](#generating-new-blog-posts)
 
 ## Adding Blog Support
 
@@ -16,32 +16,33 @@ To add blog support to your app, run the following command:
 ng g @scullyio/init:blog
 ```
 
-This will add the blog components/modules/routes to your Angular app, as well as a folder for your blog markdown files. 
-If you don't want the folder to be called 'blog', you can run a longer command to provide your own custom names/folders. 
+This will add the blog components/modules/routes to your Angular app, as well as a folder for your blog markdown files.
+If you don't want the folder to be called 'blog', you can run a longer command to provide your own custom names/folders.
 
 To name your blog folders and components another name, run the following command with your own name:
 
 ```bash
 ng g @scullyio/init:markdown --name=my-test --slug=my-slug-id
 ```
 
-or 
+or
 
 ```bash
 ng g @scullyio/init:markdown --name="my text" --slug="my slug id"
 ```
 
+> If your markdown content will include code blocks, you may want the [code to be highlighted](utils.md).
 
 ## Generating New Blog Posts
 
-To add a new blog post, run the following command. 
+To add a new blog post, run the following command.
 
-```
+```bash
 ng g @scullyio/init:post --name="This is my post"
 ```
 
----
-
+[Check how to integrate Scully  with other tools.](utils.md)
 
+---
 
 [Full Documentation ➡️](scully.md)

docs/utils.md

@@ -0,0 +1,103 @@
+# Utils
+
+Scully works well in combination with other tools and utils.
+
+1. [Syntax Highlighting using prismjs](#add-syntax-highlighting)
+
+## Syntax Highlighting Using Prismjs
+
+When you are using code blocks in your markdown files for your blog posts, you'll may define a language for the used code like this:
+
+<pre><code>```ts
+const foo = 'bar';
+```</code></pre>
+
+Scully will parse the markdown using [_marked_](https://www.npmjs.com/package/marked).
+In the end the parsed result will look like this:
+
+```html
+<code class="language-ts">
+  <span class="token keyword">const</span> foo
+  <span class="token operator">=</span>
+  <span class="token string">'bar'</span><span class="token punctuation">;</span>
+</code>
+```
+
+As you can see _marked_ will use the CSS class prefix `language-` for tagging the code block with the appropriate language.
+
+To highlight your code blocks, you can use [_prismjs_](https://prismjs.com) as it matches with the resulting class names. You can install prismjs using NPM and creating a service to highlight your code blocks:
+
+```bash
+npm i --save prismjs
+ng g s highlight
+```
+
+The service will include all languages you need and probably the clipboard library to simply copy the code etc.
+
+It could look like this:
+
+```ts
+import {Injectable, Inject} from '@angular/core';
+
+import {PLATFORM_ID} from '@angular/core';
+import {isPlatformBrowser} from '@angular/common';
+
+import 'clipboard';
+import 'prismjs';
+import 'prismjs/plugins/toolbar/prism-toolbar';
+import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-typescript';
+// ... probably more, check out node_modules/prismjs/components
+
+declare var Prism: any;
+
+@Injectable()
+export class HighlightService {
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
+
+  highlightAll() {
+    if (isPlatformBrowser(this.platformId)) {
+      Prism.highlightAll();
+    }
+  }
+}
+```
+
+After this, you need the service to be injected in your `BlogComponent` that was generated by scully:
+
+```ts
+import {/* ... */, AfterViewChecked} from '@angular/core';
+import {HighlightService} from '../highlight.service';
+/* ... */
+export class BlogComponent implements OnInit, AfterViewChecked {
+  constructor(
+    /* ... */
+    private highlightService: HighlightService
+  ) {}
+  /* ... */
+  ngAfterViewChecked() {
+    this.highlightService.highlightAll();
+  }
+}
+```
+
+The last step is to include a theme from prism:
+
+```css
+/* include CSS for prism toolbar */
+@import '~prismjs/plugins/toolbar/prism-toolbar.css';
+/* check node_modules/prismjs/themes/ for the available themes */
+@import '~prismjs/themes/prism-tomorrow';
+```
+
+That's it, all code languages you have been imported in your `HighlightService` should be highlighted now.
+Check out also the official [docs of prismjs](https://prismjs.com/)
+
+---
+
+[Full Documentation ➡️](scully.md)