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
Require two-factor authentication for your team
Team admins can now require all team members to enable two-factor authentication before accessing Flare.
Alex
Introducing Flare’s next big feature: performance monitoring
Flare's new Performance Monitoring feature is now live, giving you complete visibility into your Laravel app's HTTP routes, queued jobs, Artisan commands, and database queries.
Freek
Subscribe to Backtrace, our quarterly Flare newsletter
No spam, just news & product updates
