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
Lessons from the deep end
20 months ago, we started building Performance Monitoring as Flare’s next big feature, never expecting Laravel’s rapid commercial growth to put us in direct competition with their own tools. This is our honest take on those 20 months went, how we’re adapting to this new reality, and where we’re heading next while staying true to who we are. A dive into the deep end, without knowing how far down it goes.
Alex
Connect your AI agent to Flare to automatically fix production and performance problems in PHP and Laravel projects
You can now use our MCP server to connect your AI agent to Flare. This way your AI has all context it needs to diagnose and fix production and performance problems.
Freek
Subscribe to Backtrace, our quarterly Flare newsletter
No spam, just news & product updates
