Set up and Debug using a Tomcat Web Server and Eclipse IDE

Have you been looking to debug and run your web app in a Tomcat web server in Eclipse so you can set break points and inspect the call stack? You've come to the right guide. This guide will cover setting up a Tomcat web server in Eclipse. 

Download Eclipse IDE 

When working with the Eclipse Web Standard Tools (WST), I recommend downloading the latest Enterprise version. 

Note: If you're an expert, you can install the plugins separately. If you have an existing Eclipse and projects config, I find it's much easier to download a new version of Eclipse. And open back up the previous workspace. 

The Eclipse installer, choose the 'Eclipse IDE for Enterprise Java Developers'.  

Download Apache Tomcat

Download the latest Apache Tomcat, which means you download the web server code that can runs the Apache Tomcat web server. 

1. Download the latest Apache Tomcat. Go to the downloads, then choose the core zip. 
2. Unzip the core zip into a memorable directory. For example ~/servers/tomcat/apache-tomcat-x.x.xx.

Install the Tomcat Server

The goal is to add the Server in the Eclipse Servers list. And then it can be used to add a project to it. 

1. Open Eclipse

2. Go to the Debug Perspective. Window Menu > Open Perspective > Debug

3. Click on the 'Servers' view or looks like a tab. 

4. Click on the 'No servers are available...', this will open the 'Define a New Server' dialog. 

5. Filter the server type, 'tomcat'. 

6. Select the Tomcat server version you downloaded earlier. I selected Tomcat v9.0 Server.

7. Clicking next will bring you to the Tomcat Installation directory choice. Choose the install directory. This directory points to the unzipped files that were downloaded earlier. For example select ~/servers/tomcat/apache-tomcat-x.x.xx. Select next.

8. Add and Remove, this will allow you to add your WST web app. This can be done later too.

9. Click finish, and you have a new Tomcat Server to use with web app debugging.

Debugging

Once the server has been added, you can add your project with a web app folder to the server.  The applications web app can be added during server install or after. 

1. After the server is added, right click on server and click Add and Remove...

2. Select your project and add it to the server. 

Example of Installing the server and adding your project to it. Then running the server in debug mode. 

Editing and Debugging Java Applications

This article covers editing Java with Visual Studio Code and Eclipse.

Editing and Debugging with Visual Studio Code

Visual Studio Java Support

VS Code doesn't come with Java support by default. The features have to be installed via extensions.

1. Install the Java Extensions

Editing and Building a Java Web App 

1. Create a Project

2. Create a Java Source Folder

3. Create a Java Source Package

4. Create a Class

5. Create a HttpServlet

6. Debugging a Java Web App

Editing and Debugging with Eclipse 

Eclipse Java Support

1. Download and Install Eclipse IDE for Enterprise

 

Editing and Building a Java Web App

1. Debugging Java Web App

Debugging a Java Web App in Visual Studio Code

This guide will cover debugging your Java web app in Visual Studio Code (VS Code) using an Apache Tomcat web server to debug the project. 

Rewind - Create a Java Project First

If you missed the Create a Java Project in VS Code, check it out first. 

Download Apache Tomcat

Download the latest Apache Tomcat, which means you download the web server code that can runs the Apache Tomcat web server. 

1. Download the latest Apache Tomcat. Go to the downloads, then choose the core zip. 
2. Unzip the core zip into a memorable directory. For example ~/servers/tomcat/apache-tomcat-x.x.xx.

Install The Visual Studio Extension

Two extensions are required to debug your Java application in Visual Studio Code. 

1. Install the Java Extensions Pack 
   
2. Install the Tomcat for Java Extension 
   

Install the Tomcat Web Server

The goal is to install the Tomcat web server in Visual Studio Code so it can run the web application in debugging mode. 

1. Go to the File Explorer View
2. Expand the 'Tomcat Servers' panel
3. Hover over the panel and then click on the Add + button. 
   
4. Select the Apache Tomcat servers files directory where the tomcat files were unzipped. For example ~/servers/tomcat/apache-tomcat-x.x.xx. 
5. Once you select the server, it will be added to the servers list. The server shows a red square which means it's not running. 
   

Tomcat Server Settings

1. Right click on the Tomcat server (apache-tomcat-9.0.36). 
2. Select Open Server Configuration or Customize JVM Options. 
   

Once you open the server configuration, you can change the admin port and the connectors virtual host port. Other things like authentication could be adjusted on the server level here too.

Here's what the server configuration, server.xml looks like. 

Debug your Web App

Find your webapp directory. The webapp directory must contain the static resources to load the webapp. It must also container the server instructions in the WEB-INF/web.xml file and compiled resources in the WEB-INF/classes directory. 

1. Be sure the classes have been compiled to the WEB-INF/classes folder. This depends on the Java architecture used. 
2. Right click on the web app resources folder and select 'Debug on Tomcat Server'. 
3. Wait for the debugging process to start and load the browser, for example open http:localhost:8080

Java Folder Architecture	Typical Webapp Directory	Build
Standard Java Webapp Directory	./webapp or ./webcontent	On Save / Or Java Project Reset
Maven Webapp Directory	./target/[project-name or defined pom.xml]	Run: mvn compile war:exploded

Making Update

Hot reload your changes.

1. Make a change in the Java class or Servlet class. 

2. Hit the lightning debugger button to hot reload your class. This will copy the change to the Tomcat web app classes directory. 

3. Reload your changes in the browser. 

Video Tutorial

See the debugging in action in this video.

Issues

Common issues that might show up at some point. 

Corrupted or Missing Jar Files

Delete the Tomcat web app directory and right click and re-run the tomcat server. This will copy the files to the Tomcat web app directory again. 

1. When you right click and run 'Debug on Tomcat Server' will erase the directory and run it again. 
2. You can do it manually delete the Tomcat web app directory. Expand the tomcat server and right click on the web application. 
3. On slow systems, don't hit 'Debug on Tomcat Server' more than once. Wait for the first process to start. 

Class Not Found Problems

1. In large projects on slow systems, it takes a while to compile the classes. This happens each time VS Code is started. Wait until the classes are finished compiling before running the server. 
2. Or Use (shift + ctrl + p) or (shift + command + p) to open up the commands menu. Filter by Java and find the reset task. Run a reset to start a new compile. 
3. Or manually delete the WEB-INF/classes directory and restart VS Code to restart a Java compile. Make sure the classes are copied to the Tomcat web app directory before. 

My Youtube Series - Debugging with Brandon

I've created a Youtube series on debugging with Brandon. In this series I explore debugging a variety applications configuration. The goal is to look for efficient means of executing code written in an IDE, set breakpoints, inspecting the stack, building and deploying.

TOC

• Angular
• Debugging Angular
• Debugging Angular on App Engine
• Dart
• Debugging a Dart Web Server
• Debugging a Flutter Web App on Elastic Beanstalk
• Debugging a Flutter Web App on App Engine
• Debugging a Flutter Web App on Firebase
• Express
• Debugging an Express Web Server
• Debugging an Express Web Server on Elastic Beanstalk
• Service
• Debugging a Backend Service
• Java
• Debugging a Java Web App

Episodes

Each episode is recorded and published on my Youtube channel. Click subscribe to keep your eyes on the new releases coming out soon. Each episode has a project which is published on Github, and you can check out the source code projects list here. 

Debugging Angular

This video covers the basics of debugging Angular with VS Code.

Setting	Value
Purpose	Debugging with VS Code using a simple Angular project
Client Framework	Angular
Client Language	TypeScript
Architecture	npm/node
IDE	Visual Studio Code
License	GPL v3
Source	https://github.com/branflake2267/debugging-angular

Debugging Angular on App Engine

This video covers debugging, building and deploying Angular to App Engine. 

Setting	Value
Purpose	Debugging with VS Code using a simple Angular project
Client	Angular application
Server	Express web server
Client Framework	Angular
Client Language	TypeScript
Server Language	JavaScript
Architecture	npm/node
IDE	Visual Studio Code
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-angular-appengine

Debugging a Dart Web Server

This video covers debugging, building and deploying a Dart web server to Elastic Beanstalk. 

Setting	Value
Purpose	Debugging dart web server deployed in a multi-container docker config hosted on Elastic Beanstalk
Server	Dart http web server
Server Language	Dart
Architecture	Dart
IDE	Visual Studio Code
CI	Travis CI
Hosting	Elastic Beanstalk
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-dart-webserver

Debugging a Flutter Web App on Elastic Beanstalk

This video covers debugging, building and deploying a Flutter Web App to Elastic Beanstalk

Setting	Value
Purpose	Debugging Flutter web app with dart web server hosted on Elastic Beanstalk
Client	Flutter web app
Server	Dart http web server
Client Language	Dart
Server Language	Dart
Architecture	Flutter/Dart
IDE	Visual Studio Code
CI	Travis CI
Hosting	Elastic Beanstalk
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-flutter-android-ios-web-dartwebserver

Debugging a Flutter Web App on App Engine

This video covers debugging, building and deploying a Flutter web app to App Engine Flex. 

Setting	Value
Purpose	Debugging Flutter web app with dart web server hosted on App Engine
Client	Flutter web app
Server	Dart http web server
Client Language	Dart
Server Language	Dart
Architecture	Flutter/Dart
IDE	Visual Studio Code
CI	Travis CI
Hosting	App Engine Flex
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-flutter-web-dartwebserver-appengine

Debugging a Flutter Web App on Firebase

This video covers debugging, building and deploy a Flutter web app to Firebase Hosting.

Setting	Value
Purpose	Debugging and deploying a Flutter web app to Firebase. Fetching data from Firebase. Debugging on Android.
Client	Flutter web app, Android/iOS mobiel app
Server	Firebase
Client Language	Dart
Server Language	Firebase
Architecture	Flutter/Dart
IDE	Visual Studio Code
CI	Travis CI
Hosting	Firebase
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-flutter-firebase

Debugging Express Web Server

This video covers debugging an Express web server with simple HTML client using webpack. 

Setting	Value
Purpose	Debug a simple web server and simple front end with self contained container directory architecture
Server	Express web server
Client	Simple HTML/JavaScript webpack configuration
Language	JavaScript
Architecture	npm/node
IDE	Visual Studio Code
CI	Travis CI
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-express-with-simplehtmlwebpack

Debugging Express Web Server on Elastic Beanstalk

This video covers debugging an Express web server in a multi-container docker config hosted on Elastic Beanstalk.

Setting	Value
Purpose	Debugging a client & server multi-container docker config hosted on Elastic Beanstalk
Server	Express web server
Client	Simple HTML/JavaScript webpack configuration
Client Language	JavaScript
Server Language	JavaScript
Architecture	npm/node
IDE	Visual Studio Code
CI	Travis CI
Hosting	Elastic Beanstalk
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-multi-docker-aws-eb

Debugging Backend Service

This video covers debugging a backend service written with Typescript.

Setting	Value
Purpose	Backend service
Language	TypeScript
Architecture	npm/node
IDE	Visual Studio Code
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-service-typescript

Debugging a Java Web App

This video covers debugging a Java web app with Tomcat and VS Code. 

Setting	Value
Purpose	Debug a Java web app using Tomcat and VS Code
Server	Apache Tomcat
Server Language	Java
Architecture	Maven
IDE	Visual Studio Code
License	GPL v3
Tutorial	https://github.com/branflake2267/debugging-java-webapp

Creating a Java Web App Servlet in Visual Studio Code

Would you like to add a Java Http Servlet to your Java web app project? This guide will cover doing just that. 

Rewind - Create a Java Project First

If you missed the Create a Java Project in VS Code, check it out first. 

3 Steps

It takes three easy steps to wire up an HttpServlet.

1. Adding the HttpServlet dependency
2. Add a Java HttpServlet class
3. Map an endpoint to the HttpServlet class.

Add the Dependency to your Project

In a Maven project add the dependency below. In a Java standard project, download the jar and add it to the build path. Check the latest version out here.

<dependencies>
    <dependency>
	    <groupId>javax.servlet</groupId>
        <artifactId>javax.servlet-api</artifactId>
        <version>4.0.1</version>
        <scope>provided</scope>
    </dependency>
</dependencies>  
  

Add the Http Servlet Class 

Create an HttpServlet and add it to your source path. This example only shows how to handle a get request. You can handle other request methods too, such as: doDelete, doHead, doOptions, doPost, doPut, and doTrace.

package com.brandondonnelson;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ApiServlet extends HttpServlet {
  
  private static final long serialVersionUID = 1L;

  public void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
      
      response.setContentType("text/html");

      PrintWriter out = response.getWriter();
      out.println("./api works. Try ./api/getMessage");
   }

}

Add the Http Servlet Endpoint to the web.xml

A servlet can be configured in more than one way. In this way, it must be stated in the web.xml server instructions and mapped to an endpoint, like ./api. If you notice, the ./api endpoint is bound to the ApiServlet, so when the path is dialed up http://something.tld/api, it will run the servlet doGet path. 

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

  <display-name>My App</display-name>

  <servlet>
    <servlet-name>ApiServlet</servlet-name>
    <servlet-class>com.brandondonnelson.ApiServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ApiServlet</servlet-name>
    <url-pattern>/api</url-pattern>
  </servlet-mapping>

</web-app>
  

Load the HttpServlet

Now that everything is configured. Load the page. 

• Open the servlet by going to: http://domain.tld/api

Video Tutorial

See the debugging a servlet in action in this video.

Create a Java Package and Class in Visual Studio Code

After you've created a Java project in Visual Studio Code (VS Code), you're probably wanting to create the initial package and a Java Class. This guide will cover just that. This example configuration uses the Maven build system and Maven folder architecture, although essentially the same process can happen with a basic Java project too.

Rewind - Create a Java Project First

If you missed the Create a Java Project in VS Code, check it out first. 

Create the First Java Source Folder

First off, you need a Java source folder. Create the folder src/main/java.

Typical Maven architecture follows after:

src/main/java	Java source directory in a Maven project.
src/main/test	Testing source directory in a Maven project.
src/main/webapp	Webapp directory with static resources and server instructions.

Create the First Project Package

Now you're ready to add your source code to the project but you'll need a package or namespace to add it to. The first thing you'll want to do is add your first base Java package. For example if my package is named com.brandondonnelson, the first base directory would work out to be; src/main/java/com/brandondonnelson. 

Create the first base base package in this directory src/main/java/com/brandondonnelson.

For example, in this image, you'll see the Java source folder contains the first package. The first base package being com.brandondonnelson. 

Example creating the Java source folder and first base package:

      (Click on the animated gif for a larger view)

Change the Chrome User Agent

Are you wanting to test your site with a different user agent? You can change the user agent in the Chrome Dev Tools. 

Open and Select User Agent

It's simple to open up and change the network conditions in the Chrome Developer Tools. What you do is find the network conditions and set the user agent. 

1. Open the Chrome Developer Tools. 

2. Open the Menu. (From the top menu, click on more tools then... From the console menu, click on 'Network conditions.' )

3. Find and Select 'Network conditions'

4. In the user agent un-select 'Select automatically'.

5. In the custom agent list, select a user agent

Find the 'Network conditions' in the menu:

Find the 'Network conditions' in the menu:

      (Click on the animated gif for a larger view...)

Creating a Java Web App Project with Visual Studio Code

Are you looking to create your Java web app project in VS Code? You've come to the right place. 

Set up VS Code with Java

First off, you'll need to install the Java VS Code Extensions Pack.  Install Link 

Creating a Java Web App Project

1. Open up the VS Code commands menu with (⇧⌘P) or (⇧+Ctrl+P).  (Note: ⇧ = Shift)

2. Filter 'Java' or 'Java Create Project' and select Create Java Project.

3. Select Maven, use maven build system. 

4. Filter 'webapp' and select the 'maven-archetype-webapp' template. 

5. Select the archetype version 1.4+.

6. Select the generate the app output directory.

7. Maven will start by generating the project, but first it will ask some questions:

• groupId: com.brandondonnelson - I choose my domain
• artifactId: server - I choose my simple app name, 'server'. 
• version: 1.0-SNAPSHOT - I choose the default and hit enter. 
• package: com.brandondonnelson - I choose my package name, the same as the groupId.
• Confirm the setting... The project is generated based on those settings. 

8. Open the newly generated project folder, in my case 'server'.

9. The project will auto import and configure a .project and .classpath files. These files are auto generated based on the pom.xml instructions.

The same instructions can be seen here in this animated gif:

      (Click on gif for a larger view)

State the Home Page in a Java Web Project Using the web.xml welcome-file-list

The web.xml contains the Java server web serving instructions. And the <welcome-file-list /> states the files that will loaded if no page is declared when you're loading a site.  

Default Configuration

The default configuration loads pages in order of priority stated. And when nothing is found it will respond with a 404. 

Default Load Priority

1. index.html

2. index.html

3. index.htm

4. index.jsp

Example of the default WEB-INF/web.xml webapp config.

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

	<!-- No <weclome-file-list/> stated for the default config -->

</web-app>

Usage

Add the welcome-file-list tag element to your web-app element and state the pages you would like to load as your home page when no page is declared like the configuration below.

Load My Pages in Order of:

1. index.html

2. index.jsp

3. home.jsp

4. help.jsp

Example of stating your own WEB-INF/web.xml welcome-file-list. 

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

	<!-- Make your own welcome-file load priority -->
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>home.jsp</welcome-file>
        <welcome-file>help.jsp</welcome-file>
    </welcome-file-list>

</web-app>

Adding Code Syntax Highlighting to your Blogger

Are you looking to add code syntax highlighter to your blog so your code examples look beautiful? Prism.js code syntax highlighter does just that and I'll be covering how to quickly you can add the configuration to your blog below. 

What is Prism.js

"Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in thousands of websites, including some of those you visit daily," prismjs.com.

Themes

Here are some of the themes you can choose. 

Theme: Default

Theme: Tomorrow Night

Theme: Coy

Theme: Solarized Light

Check out the other themes here.

Configure the Syntax Highlighting Features

The easiest way to include it in your blog is by importing the resources from CDN. In this case I'm going to show how to use the cdn.jsdelivr.net CDN repository to import the resources into your blog.

Step 1: Choose the features you want to use.

In this example below I'll use the auto loader to wire up the languages meaning it will download the resources for the languages specified in the class attribute in the PRE or CODE tags. 

- https://www.jsdelivr.com/package/npm/prismjs - Core resources reference

- https://www.jsdelivr.com/package/npm/prismjs?path=plugins - Plugin resources reference

Step 2: Copy these imports to your blog html.

Configure the resources you want to import and the plugins you want to use in your blog. 

<!-- Import the core prism.js resources -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>

<!-- Declare the languages path, the components directory -->
<script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/'; </script>

<!-- Optional: Import the prism.js plugin: Command Line -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.min.js"></script>

Step 3: Normalizing Whitespaces

When adding code to the PRE & CODE tags, you'll probably want to normalize how it looks so you don't have to spend time formatting HTML. Check out the reference material here. 

<!-- Optional: Import the prim.js plugin: Normalize Whitespace -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>

<script>
Prism.plugins.NormalizeWhitespace.setDefaults({
	'remove-trailing': true,
	'remove-indent': true,
	'left-trim': true,
	'right-trim': true,
    'remove-initial-line-feed': true,    
	/*'break-lines': 80,
    'indent': 2,
	'tabs-to-spaces': 4,
	'spaces-to-tabs': 4*/
});
</script>

Step 4: Copy the resources to your Blogger Theme

I'll cover adding it in Blogger, but adding it to any site is going to be the same. 

1. In your Blogger BlogSpot, go to the layout settings. 
   
2. Once in the layout settings. Click "Add a Gadget" select HTML/Javascript.
3. Add the prism.js imports and Javascript configuration to content area. Don't give it a title. Putting it all together, this is what I add to my blog HTML/JavaScript import. 

   <!-- Import the core prism.js resources -->
   <link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/prism-core.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/autoloader/prism-autoloader.min.js"></script>
   
   <!-- Declare the languages path, the components directory -->
   <script>Prism.plugins.autoloader.languages_path = 'https://cdn.jsdelivr.net/npm/prismjs@1.20.0/components/'; </script>
   
   <!-- Optional: Import the prism.js plugin: Command Line -->
   <link href="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.css" rel="stylesheet" />
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/command-line/prism-command-line.min.js"></script>
   
   <!-- Optional: Import the prism.js plugin: Normalize Whitespace -->
   <script src="https://cdn.jsdelivr.net/npm/prismjs@1.20.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
   
   <script>
   Prism.plugins.NormalizeWhitespace.setDefaults({
   	'remove-trailing': true,
   	'remove-indent': true,
   	'left-trim': true,
   	'right-trim': true,
       'remove-initial-line-feed': true,    
   	/*'break-lines': 80,
       'indent': 2,
   	'tabs-to-spaces': 4,
   	'spaces-to-tabs': 4*/
   });
   

   
4. Last but not least, save the new content.

 
Usage

Now that you've imported the features, using them are simple. In the blog post go to the html source editor and add <pre class="language-[choose-prism-lang]"><code> // code </code></pre> tags. 

Sharing HTML code

The browser will render tags in the pre/code tags. To work around rendering tags, escape the tags starting and ending characters to html entities. For example a <TAG></TAG> becomes &lt;TAG&gt;&tl;/TAG&gt;.

Starting Character	<	&lt;	&lt;TAG&gt;
Ending Character	>	&gt;	&lt;TAG&gt;

Simple Syntax Highlighting Example

This is a simple example showing how to use the syntax highlighting. In the pre tag, add class="language-[choose-prism-lang]". 

Declare your html like so in the source editor:

<pre class="language-css"><code>
.mydiv { 
    background-color: rgba(120, 01, 18, .48); 
}
</code></pre>

It will render like so when you preview:

.mydiv { 
    background-color: rgba(120, 01, 18, .48); 
}

Share your Configuration

I hope that helped wire your prism.js configuration in your blog. I'd love to see the way you're using prism.js. Could you send me a link in the comments below so I could check out your configuration?