If you've visited our blog or documentation in the last couple of weeks, you might've noticed things look a little different. We're now highlighting all code blocks using Shiki, an open-source syntax highlighter written in JavaScript. Shiki makes code blocks look a lot better than the previous highlighting method using highlight.php.
Some examples ✨
Let's start with a simple PHP example:
use Facade\FlareClient\Report;
class FlareMiddleware
{
public function handle(Report $report, $next)
{
$context = $report->allContext();
$context['session'] = null;
$report->userProvidedContext($context);
return $next($report);
}
}
JavaScript poses no challenge either:
import { flare } from "@flareapp/flare-client";
try {
functionThatMightThrow();
} catch (error) {
flare.report(error);
}
HTML looks great too:
<html lang="en">
<head>
<title>Laravel error tracking – Flare</title>
<meta name="description" content="Full-stack Laravel error tracking made specifically for your Laravel applications and JavaScript frontends.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="alternate" type="application/atom+xml" href="https://flareapp.io/feed" title="flareapp.io">
<link rel="apple-touch-icon" sizes="180x180" href="https://flareapp.io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://flareapp.io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://flareapp.io/favicon-16x16.png">
<link rel="manifest" href="https://flareapp.io/site.webmanifest">
<meta name="msapplication-TileColor" content="#4f0f8f">
<meta name="theme-color" content="#4f0f8f">
</head>
</html>
CSS never was so pretty:
.modal-header {
flex: none;
display: grid;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
height: var(--tab-bar-height);
background-color:var(--gray-200)
}
@media (min-width: 768px) {
.modal-header {
padding-left: 3rem;
padding-right:3rem
}
}
And last but not least, we can show diffs now:
--- public function invitations()
+++ public function invitations(): HasMany
{
return $this->hasMany(Invitation::class);
}
Behind the scenes
All of the above is powered by our newest laravel-markdown package. It converts markdown to HTML and it's using Shiki and our shiki-php package to highlight code blocks. Because Laravel has a built-in MarkdownRenderer that we like to use, we don't call CommonMark directly. Instead we resolve the renderer class from the container:
--- return CommonMark::convertToHtml($this->text);
+++ return app(MarkdownRenderer::class)->toHtml($this->text);
Because Shiki is quite heavy on performance (a nodeJS server is started on the backend each time you're trying to highlight a code block) we decided to add an extra layer of caching:
return cache()->remember(
"posts.{$this->id}.formatted_text",
null,
fn () => app(MarkdownRenderer::class)->toHtml($this->text)
);
On the Post model we added a listener that will (re-)cache the blogpost whenever it's saved. This will trigger when the model is created and updated:
static::saved(function (Post $post): void {
cache()->delete("posts.{$post->id}.formatted_text");
$post->getFormattedTextAttribute(); // re-cache
});
Continue reading
Flare now uses OAuth for MCP, the CLI, and API
Connect MCP clients like Claude and Cursor to Flare by logging in from your browser, no more copying API tokens. Every connection gets its own permissions, so you can give your AI read-only access to a single project. The CLI signs in the same way, and new personal access tokens with scopes and expiry cover scripts and CI.
Alex
Bringing Flare back to Laravel 10 and PHP 8.1
Flare now supports Laravel 10 and PHP 8.1 again, so older apps get performance monitoring and logs too. Here’s how we did it.
Ruben
Subscribe to Backtrace, our quarterly Flare newsletter
No spam, just news & product updates
