我正在构建一个博客文章，作者将在其中写一篇文章（包括用户可以从中复制代码的代码片段）。 问题是，当我上传带有laravel blad [此处输入图像描述] [2] e代码的代码片段的帖子时，由于未定义代码片段中的属性，因此它会执行并引发错误。
我想逃避执行代码而只是查看它。
我做了什么：
我将整个文章以HTML格式上传，并按原样存储在数据库中
我使用净化器来确保上传的代码不是恶意的
代码段被<pre><code></code><pre>
[Vue warn]: Error compiling template:
avoid using JavaScript keyword as property name: "class"
Raw expression: This is code block 1<div class="col">
<div class="card ">
<div class="card-header">
Hot Articles
</div>
<ul class="list-group list-group-flush">
@foreach($articles as $a)
<li class="list-group-item">
<a href="/articles/{{$a->id}}" class="text-dark font-weight-bold">{{$a->title}}</a>
</li>
@endforeach
</ul>
</div>
<div class="card mt-3 py-2">
<img class="d-flex mb-3 mx-auto rounded-circle img-thumbnail" src="/system/Poster.jpeg" alt="Generic placeholder image" width="150">
<div class="card-body">
<h5 class="card-title font-weight-bold">Badr Alwattar</h5>
<ul>
<li>Fullstack web developer</li>
<li>Linux user</li>
<li>Freelancer</li>
</ul>
<h6>Find me online:</h6>
<a href="https://instagram.com/badr_alwattar?igshid=1lemoew0gq3bz" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/2111/2111463.svg" alt="Generic placeholder image" width="35"></a>
<a href="https://twitter.com/iBadr36" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/145/145812.svg" alt="Generic placeholder image" width="35"></a>
<a href="https://github.com/badr-alwattar" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/1051/1051326.svg" alt="Generic placeholder image" width="35"></a>
<a href="https://www.linkedin.com/in/bader-eddin-alwattar/" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/145/145807.svg" alt="Generic placeholder image" width="35"></a>
<h6>Or send me a message on <a href="#" data-toggle="modal" data-target="#contactme">Contact Me</a>, I will be more than happy hearing from you</h6>
</div>
{{-- <ul class="list-group list-group-flush">
<li class="list-group-item">Drop your message in (Cntact me)</li>
</ul> --}}
</div>
</div>Ande this is code block 2
38 | <div class="article-body">
39 | <img src="/images/1595709974.jpeg" class="img-responsive w-100" alt="Responsive image">
40 | <p>This is code block 1<div class="col">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
41 | <div class="card ">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
42 | <div class="card-header">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
43 | Hot Articles
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
44 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
45 | <ul class="list-group list-group-flush">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
46 | @foreach($articles as $a)
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
47 | <li class="list-group-item">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
48 | <a href="/articles/{{$a->id}}" class="text-dark font-weight-bold">{{$a->title}}</a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
49 | </li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
50 | @endforeach
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
51 | </ul>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
52 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
53 | <div class="card mt-3 py-2">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
54 | <img class="d-flex mb-3 mx-auto rounded-circle img-thumbnail" src="/system/Poster.jpeg" alt="Generic placeholder image" width="150">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
55 | <div class="card-body">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
56 | <h5 class="card-title font-weight-bold">Badr Alwattar</h5>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
57 | <ul>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
58 | <li>Fullstack web developer</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
59 | <li>Linux user</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
60 | <li>Freelancer</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
61 | </ul>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
62 | <h6>Find me online:</h6>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
63 | <a href="https://instagram.com/badr_alwattar?igshid=1lemoew0gq3bz" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/2111/2111463.svg" alt="Generic placeholder image" width="35"></a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
64 | <a href="https://twitter.com/iBadr36" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/145/145812.svg" alt="Generic placeholder image" width="35"></a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
65 | <a href="https://github.com/badr-alwattar" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/1051/1051326.svg" alt="Generic placeholder image" width="35"></a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
66 | <a href="https://www.linkedin.com/in/bader-eddin-alwattar/" target="block"><img class="d-inline mb-3 mx-1" src="https://image.flaticon.com/icons/svg/145/145807.svg" alt="Generic placeholder image" width="35"></a>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
67 | <h6>Or send me a message on <a href="#" data-toggle="modal" data-target="#contactme">Contact Me</a>, I will be more than happy hearing from you</h6>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
68 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
69 |
| ^^^^^^^^^^^^^^^^^^^^^^^^
70 | {{-- <ul class="list-group list-group-flush">
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
71 | <li class="list-group-item">Drop your message in (Cntact me)</li>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
72 | </ul> --}}
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
73 |
| ^^^^^^^^^^^^^^^^^^^^^^^^
74 | </div>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
75 | </div>Ande this is code block 2</p>
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
(found in <Root>)
渲染身体的代码
<div class="col-lg-9">
<div class="article-body">
<img src="{{$article->thumbNail}}" class="img-responsive w-100" alt="Responsive image">
{!! $article->body !!}
<hr>
</div>
</div>