# Highlight.js - Get started in Dart

In this tutorial we will look at the [Highlight.js](https://highlightjs.org/) library and reproduce the examples in Dart using the [**js interop**](https://pub.dartlang.org/packages/js) package. We will also learn about using Web Workers to run code highlighting. This will improve page performance when processing large chunks of code.

## **Setup**

Install the [Dart extension](https://dartcode.org) for VS Code. It allows Dart language support and debugging for Dart projects.

Once the extension is installed, open up the **Command Palette** by going to **View > Command Palette**. *You can also use the keyboard shortcut* ***Shift+Cmd+P*** *on Mac and* ***Ctrl+Shift+P*** *on Windows.*

Once opened search and select “**Dart: New Project**“.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1725888397994/6548b170-c0c8-477e-b3ba-54ef6be23815.png align="center")

Select the **Bare-bones Web App** and generate a **web-simple** project. Set a project/name and a directory to generate a project folder.

Uncomment the dependencies section of the `pubspec.yaml` file and add the **js** package:

```yaml
dependencies:
  js: ^0.6.0
```

**Save** the file. The Dart extension should run the `pub get` command to update the dependencies in your project. If not open the terminal and run the command manually.

## Watch full tutorial

%[https://youtu.be/EprN2qncPVQ] 

Here’s the interop file we created in the video:

```dart
// lib/src/interop.dart
@JS()
library highlight_interop;

import 'dart:html';
import 'package:js/js.dart';

@JS()
external HighlightInterface get hljs;

@JS()
class HighlightInterface {
  external void highlightBlock(Element block);
  external void configure(HlConfigOptions options);
  external HighlightAutoInterface highlightAuto(String snippet);
}

@JS()
@anonymous
class HlConfigOptions {
  external factory HlConfigOptions({bool useBr});
  external void set useBr(bool useBrVal);
}

@JS()
class HighlightAutoInterface {
  external get value;
}
```

[Get the source code](https://github.com/graphicbeacon/js-dart-interop-samples/tree/master/highlight)

I hope this was insightful and that you learnt something new today.

## **Further reading**

1. [js package](https://pub.dartlang.org/packages/js)
    
2. [How to Use JavaScript libraries in your Dart applications](http://localhost:8080/how-to-use-javascript-libraries-in-your-dart-applications/)
    
3. [highlight.js library](https://highlightjs.org/)