Benchmark: Highlightjs vs prettier

HTML Preparation code:

<div id="log"></div>

<textarea id="content"><!doctype html>
<html>
<head>
    <title>HTML Test</title>

    <style type="text/css">
        h1 {
            font-size: 1em;
        }
        p { color: pink }
        b { color: blue }
        u { color: "umber" }
    </style>
</head>

<body>
    <h1>Hello world!</h1>
</body>

<script type="text/javascript">
    // Say hello world until the user starts questioning
    // the meaningfulness of their existence.
    function helloWorld(world) {
        for (var i = 42; --i >= 0;) {
            alert('Hello ' + String(world));
        }
    }
</script>

</html></textarea>

<pre><code id="code-block" class="html prettyprint language-html"></code></pre>

<!-- include highlight.js along with its default languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/highlight.min.js"></script>

<!-- include prettify with a single language -->
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/prettify.js"></script>

Script Preparation code:

document.querySelector("#code-block").innerText = document.querySelector("#content").value;

Tests:

Highlightjs
hljs.highlightBlock(document.querySelector("#code-block"));
Prettier
PR.prettyPrint();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Highlightjs
Prettier

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 126 on Android

View result in a separate tab

Test name	Executions per second
Highlightjs	5.6 Ops/sec
Prettier	817423.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explain what's being tested on MeasureThat.net.

**Benchmark Overview**

The provided benchmark measures the performance difference between two popular code formatting tools: Highlight.js (hljs) and Prettier (PR). The benchmark is designed to test which tool can format HTML, CSS, and JavaScript code more efficiently.

**Test Cases**

There are only two individual test cases:

1. **Highlightjs**: This test case measures the time it takes for Highlight.js to format a block of HTML code using its `hljs.highlightBlock()` function.
2. **Prettier**: This test case measures the time it takes for Prettier to format the same HTML code using its `PR.prettyPrint()` function.

**Library and Purpose**

* **Highlight.js (hljs)**: Highlight.js is a JavaScript library that highlights syntax in various programming languages, including HTML, CSS, and JavaScript. Its primary purpose is to make code more readable by highlighting keywords, functions, and other important elements.
* **Prettier**: Prettier is a popular code formatting tool that formats code according to a set of style guidelines, making it more consistent and easier to read.

**Options Being Compared**

In this benchmark, two options are being compared:

1. Highlight.js (hljs): Uses its `highlightBlock()` function to format the HTML code.
2. Prettier (PR): Uses its `prettyPrint()` function to format the same HTML code.

**Pros and Cons of Each Approach**

* **Highlight.js**: Pros:
	+ Fast formatting time
	+ Supports multiple languages, including HTML, CSS, and JavaScript
	Cons:
	+ May not provide consistent formatting across all programming languages
	+ Can be resource-intensive for large code blocks
* **Prettier**: Pros:
	+ Consistent formatting across all programming languages
	+ Smaller code footprint compared to Highlight.js
	Cons:
	+ Slower formatting time compared to Highlight.js
	+ Limited support for certain syntax elements

**Special JS Feature or Syntax**

There is a special JavaScript feature being used in this benchmark: `async/await`. The test case includes an asynchronous function (`helloWorld(world)`) that uses `for` loops and `alert()` statements. While not directly related to the formatting functionality, this code snippet helps demonstrate the performance difference between Highlight.js and Prettier.

**Other Alternatives**

There are other code formatting tools available that could be used in a similar benchmark:

* **ESLint**: A popular JavaScript linter that also provides formatting capabilities.
* **Stylelint**: Another JavaScript linter that offers formatting features.
* **CodeFormatter**: A library specifically designed for code formatting and beautification.

Keep in mind that each of these alternatives has its own strengths and weaknesses, and may not provide the exact same performance characteristics as Highlight.js or Prettier.

Related benchmarks:

Highlightjs vs prettier (version: 0)

Comparing performance of: Highlightjs vs Prettier

Created: 4 years ago by: Guest

Jump to the latest result

Highlightjs

Prettier

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):