Feature demonstration

Feature demonstration

This article shows the features of this blog. It is able to handle titles, text, math, code with custom syntax highlighting, citations and images. The following paragraphs will demonstrate these features with live examples.
What you see is what you get? No, it isn't! What you mean is what you get!
That's right, at first I'd like to introduce the Latex feature. It is able to use latex math expressions and render it like one is able to write with usual latex. It's based on an external super fast Latex interpreter called Katex and looks like follows:
exp(x2)π=I’m a LaTeXrenderer in a website\frac{\exp(x^2)}{\pi} = \text{I'm a \LaTeX \,renderer in a website}

Syntax Highlighting

The next part is the code paragraph with syntax highlighting. You can select the syntax by adding e.g. the frase syntax:typescript as a singleliner in front of the code. For now the following languages are available: html, typescript, c++. But it is fully customizable and can handle other languages as well. When using html it looks for tags. When using the other ones it looks for keywords. Each keyword can have its own color. Typescript is also able to syntax highlight decorators as well.
<!DOCTYPE html> <html lang="en-US"> <head></head> <body> Html syntax highlighting </body> </html>
Listing: Basic html template
This is an example for typescript syntax highlighting:
import { Component } from '@angular/core'; @Component({ selector: 'app-my-component', template: ` <div> I am a multiline string </div> `, styles: [ ] }) export class MyComponentComponent {}
Listing: Basic angular component
And this is a sample c++ program
#include<iostream> #include<cstdlib> int main(int argc, char* argv[]) { std::cout << "I am a string" << std::endl; return 0; }
Listing: Almost the simplest C++ program

Comments

Any questions? Want to join the discussion?

Sign in or sign up