add highlightjs for the body of the requests
This commit is contained in:
parent
0ed52a3cf6
commit
8a069cda2c
|
@ -43,6 +43,24 @@ function setupConnection() {
|
|||
setupConnection();
|
||||
};
|
||||
}
|
||||
/*
|
||||
Create the highlight directive
|
||||
*/
|
||||
Vue.directive("highlightjs", {
|
||||
deep: true,
|
||||
bind: function(el, binding) {
|
||||
if (binding.value) {
|
||||
el.textContent = binding.value;
|
||||
}
|
||||
hljs.highlightBlock(el);
|
||||
},
|
||||
componentUpdated: function(el, binding) {
|
||||
if (binding.value) {
|
||||
target.textContent = binding.value;
|
||||
hljs.highlightBlock(target);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
Setup a simple components to handle the display of new content.
|
||||
|
|
|
@ -8,13 +8,18 @@
|
|||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
|
||||
/>
|
||||
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
<link
|
||||
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}"></link>
|
||||
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}"></link>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css"
|
||||
/>
|
||||
<link rel="stylesheet" href="{% static 'css/main.css' %}" />
|
||||
<link rel="stylesheet" href="{% static 'css/gh-corner.css' %}" />
|
||||
<title>Webhook Logger</title>
|
||||
</head>
|
||||
<body>
|
||||
|
@ -42,7 +47,10 @@
|
|||
</span>
|
||||
</div>
|
||||
<div class="control">
|
||||
<a class="button is-info is-outlined is-large" v-on:click="copytoclipboard()">
|
||||
<a
|
||||
class="button is-info is-outlined is-large"
|
||||
v-on:click="copytoclipboard()"
|
||||
>
|
||||
<i class="fa fa-files-o"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -107,8 +115,14 @@
|
|||
<header class="card-header">
|
||||
<p class="card-header-title">Body</p>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
[[request.body]]
|
||||
<div
|
||||
class="card-content"
|
||||
v-if="request.headers['Content-Type']"
|
||||
>
|
||||
<pre v-highlightjs>[[request.body]]</pre>
|
||||
</div>
|
||||
<div class="card-content" v-else>
|
||||
<pre>[[request.body]]</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -120,8 +134,12 @@
|
|||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Webhook Logger</strong> by <a href="https://ovalerio.net">Gonçalo Valério</a>. The source code is licensed
|
||||
<a href="https://github.com/dethos/webhook_logger/blob/master/LICENSE">GPL-3.0</a>.
|
||||
<strong>Webhook Logger</strong> by
|
||||
<a href="https://ovalerio.net">Gonçalo Valério</a>. The source code is
|
||||
licensed
|
||||
<a href="https://github.com/dethos/webhook_logger/blob/master/LICENSE"
|
||||
>GPL-3.0</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
@ -152,6 +170,7 @@
|
|||
</svg>
|
||||
</a>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
|
||||
<script src="{% static 'js/viewer.js' %}"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue