The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
 
 #wp-log-output{
 	padding:10px;
 	background:#fff;
	border:1px solid #eee;
	font-family:Helvetica;
	color:#555;
 }
 
 #wp-log-output details{
 	/*background:#f1f1f1;*/
 	margin-bottom:5px;
 }
 
 #wp-log-output details summary{
	padding:10px;
	background-color: #EEE;
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, whiteSmoke 0%, #EEE100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,whiteSmoke), color-stop(100%,#EEE));
	background-image: -webkit-linear-gradient(top, whiteSmoke 0%,#EEE100%);
	background-image: -ms-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
	background-image: -o-linear-gradient(top, whiteSmoke 0%,#EEE 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 );
	background-image: linear-gradient(top, whiteSmoke 0%,#EEE 100%);
	border: 1px solid #E5E5E5;
/*	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;*/ 	
	font-weight:bold;
 	font-size:14px;
 	text-shadow:1px 1px 1px #fff;
 }

 #wp-log-output table{
 	/*border: 1px solid #DDD;*/
 	border-collapse: separate;
 	border-left: 0;
 	font-size:11px;
 	width:100%
}

#wp-log-output table th{
	width:120px;
}

#wp-log-output table td,
#wp-log-output table th{
	padding: 5px;
	line-height: 18px;
	text-align: left;
	vertical-align: top;
	border-top: 1px solid #DDD;
}

#wp-log-output table tr:first-child td,
#wp-log-output table tr:first-child th{
	border-top:none;
}

#wp-log-output table tr:nth-child(odd) td,
#wp-log-output table tr:nth-child(odd) th {
	background-color: #F9F9F9;
}

dabblet.html

<div id="wp-log-output">

		<?php // General Post Information ?>
		<details>
			<summary>General Post Info</summary>
			<table style="text-align:left">
				<tr>
					<th>Post ID:</th><td>1</td>
				</tr>
				<tr>
					<th>Post Name:</th><td>Post Name</td>
				</tr>
				<tr>
					<th>Post Slug:</th><td>post-slug</td>
				</tr>
				<tr>
					<th>Post Type:</th><td>post-type</td>
				</tr>
				<tr>
					<th>Post Format:</th><td>post-format</td>
				</tr>
			</table>
		</details>

		<?php // WP Built In Taxonommies ?>
		<details>
			<summary>WP Built-in Taxonomies</summary>
			<table style="text-align:left">
				<tr>
					<th>Post Categories:</th><td>Category Name [category-slug], Category Name [category-slug]</td>
				</tr>
				<tr>
					<th>Post Tags:</th><td>Tag Name [tag-slug], Tag Name [tag-slug]</td>
				</tr>
			</table>
		</details>

		<?php // Custom Taxonommies ?>
		<details>
			<summary>Custom Taxonomies</summary>
			<table style="text-align:left">
				<tr>
					<th>Taxonomy Name:</th><td>Term Name [term-slug], Term Name [term-slug]</td>
				</tr>
			</table>
		</details>

		<?php // Custom Meta Data ?>
		<details>
			<summary>Custom Meta Data</summary>
			<table style="text-align:left">
				<tr>
					<th>Meta Field Name:</th><td>Meta Value</td>
				</tr>
			</table>
		</details>
		
		<?php // Custom Meta Data ?>		
		<details>
			<summary>Full $post Object</summary>
			<br>
			print_r of object wrapped in pre tags goes here ...
		</details>

	</div>

settings.json

{"view":"split-vertical","fontsize":"70","seethrough":"","prefixfree":"1","page":"html"}