Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main>
	<section id="work-area">
		<textarea id="editor"></textarea>
		<div id="preview" class="markdown-body"></div>
	</section>
	<section id="config">
		<p style="margin-top: 0px;">
			<label for="enable-custom"><input style="width: 20px; height: 20px; vertical-align: bottom;" type="checkbox" id="enable-custom">Enable Custom Inline Styles&nbsp;</label>
			<span id="enable-desc" style="position: relative; width: 20px; height: 20px; background: white; border-radius: 20px; box-shadow: 1px 1px 1px black; cursor: default;">
				&nbsp;?
				<span id="enable-desc-content" style="position: absolute; top: -100%; left: 150%; width: 360px; padding: 10px; background: white; display: none; z-index: 1;">If checked, custom inline styles will be applied to all p tags</span>
			</span>
			<span>&nbsp;&nbsp;&nbsp;</span>
			<label for="enable-toc"><input style="width: 20px; height: 20px; vertical-align: bottom;" type="checkbox" id="enable-toc">Enable Table of Contents&nbsp;</label>
			<input type="button" value="Copy HTML result" id="copy">
			<span id="func-desc" style="position: relative; width: 20px; height: 20px; background: white; border-radius: 20px; box-shadow: 1px 1px 1px black; cursor: default;">
				&nbsp;?&nbsp;
				<span id="func-desc-content" style="position: absolute; top: -100%; left: 150%; width: 360px; padding: 10px; background: white; display: none; z-index: 1;">Only header/paragraph/image/link will be converted, link will be opened in new tab</span>
			</span>
		</p>
		<p>
			<span>margin top & bottom: </span>
			<input style="width: 50px;" type="number" id="p-margin-t" value="16">
			<span>px&nbsp;&nbsp;&nbsp;&nbsp;margin left & right: </span>
			<input style="width: 50px;" type="number" id="p-margin-l" value="8">
			<span>px</span>
		</p>
		<p>
			(only for p tag)&nbsp;&nbsp;
			<span>line-height: </span>
			<input style="width: 50px;" type="number" id="p-line-h" value="24">
			<span>px&nbsp;&nbsp;font-size: </span>
			<input style="width: 50px;" type="number" id="p-font-size" value="18">
			<span>px</span>
		</p>
	</section>
</main>
<textarea style=" position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; opacity: 0.01; z-index: -1;" id="copyArea"></textarea>
<div class="alert-success">
	Content Copied!
</div>
<!-- Default Statcounter code for Codepen - image size
checker http://codepen.io/houzhenni/pen/bMjVLe -->
<script type="text/javascript">
	var sc_project = 11722433;
	var sc_invisible = 1;
	var sc_security = "7fc26bb9";
</script>
<script type="text/javascript" src="https://www.statcounter.com/counter/counter.js" async></script>
<noscript>
	<div class="statcounter"><a title="Web Analytics" href="https://statcounter.com/" target="_blank"><img class="statcounter" src="https://c.statcounter.com/11722433/0/7fc26bb9/1/" alt="Web Analytics"></ a>
	</div>
</noscript>
<!-- End of Statcounter Code -->
              
            
!

CSS

              
                html, body {
	margin: 0px;
}
main {
	margin: 0px auto;
	width: 1040px;
}
#work-area {
	margin: 0px auto;
	padding: 20px 20px 0px 20px;
	background: #ff9a9a;
	display: flex;
	justify-content: center;
}
#editor, #preview {
	padding: 14px;
	width: 520px;
	height: calc(100vh - 208px);
	word-wrap: break-word;
	word-break: break-all;
}
#editor {
	margin-right: 10px;
	color: white;
	background: black;
	resize: none;
	border: none;
}
#preview{
	margin-left: 10px;
	background: white;
	overflow-y: auto;
}
#config {
	margin: 0px;
	width: auto;
	padding: 20px;
	background: #ff9a9a;
}
.markdown-body h1,.markdown-body h2 {
	border: none;
}
.alert-success {
	position: fixed;
	top: 200px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	margin: 0px auto;
	width: 400px;
	height: 100px;
	text-align: center;
	color: #286636;
	font-size: 20px;
	font-weight: bold;
	line-height: 100px;
	background: #d4edda;
	border-radius: 15px;
	z-index: 999999;
	display: none;
}
              
            
!

JS

              
                var sampleData = `# 这是文章标题

## 这是二级标题

这是普通的文字。

**这是加粗的文字**

***这是斜体加粗的文字***

~~这是加删除线的文字~~

*这是倾斜的文字*

## 这是二级标题

### 这是三级标题

- Apple
- Pear
- Orange

### 这也是三级标题

>这是引用的内容
>
>>这是引用的内容
>>
>>这是引用的内容

\`\`\`JavaScript
function myFun() {
  var that = this;
  return that;
}
\`\`\`
`;
marked.setOptions({
	highlight: function(code) {
    return hljs.highlightAuto(code).value;
  },
});
function updatePreview(){
	var source = $("#editor").val();
	//方便复制html时前面有个缩进
	var html = "\t" + marked(source);
	html = html.replace(/\<a/g,"<a target='_blank'");
	html = html.replace(/\<img/g,"<img style='max-width: 100%;'");
	var isEnabledCustom = $("#enable-custom").prop("checked");
	if (isEnabledCustom) {
		html = html.replace(/\<p\>/g,`<p style="margin: ` + $("#p-margin-t").val() +`px ` + $("#p-margin-l").val() + `px; line-height: ` + $("#p-line-h").val() + `px; font-size: ` + $("#p-font-size").val() + `px;"\>`);
		let headers = ["<h1 ","<h2 ","<h3 ","<h4 ","h5 "];
		let regExs = [/<h1 /g,/<h2 /g,/<h3 /g,/<h4 /g,/<h5 /g];
		for (let i = 0; i < headers.length; i++) {
			html = html.replace(regExs[i],headers[i] + ` style="margin: ` + $("#p-margin-t").val() +`px ` + $("#p-margin-l").val() + `px;"`);
		}
	}
	//方便复制html时每行前面都有缩进
	html = html.replace(/\n\</g,"\n\t<");
	$("#preview").html(html);
	
	// $("#preview h2").eq(0).attr("id", "section");
	// $("#preview h5").eq(0).attr("id", "section-1");
	$("#preview ol").children().each(function(){
		$(this).css("list-style-type", "decimal");
	});
	$("#preview ul").children().each(function(){
		$(this).css("list-style-type", "disc");
	});
	
	//add table of contents
	var isToc = $("#enable-toc").prop("checked");
	var tocHTML = "";
	if (isToc) {
		tocHTML = generateLinkMarkup(document.querySelector("#preview"));
		$("#preview h1").css("text-align","center");
		$(tocHTML).insertAfter($("#preview h1").eq(0));
	}
	function generateLinkMarkup($contentElement) {
		const headings = [...$contentElement.querySelectorAll('h2, h3')]
		const parsedHeadings = headings.map(heading => {
			return {
				title: heading.innerText,
				depth: heading.nodeName.replace(/\D/g,''),
				id: heading.getAttribute('id')
			}
		})
		const htmlMarkup = parsedHeadings.map(h => `
		<li style="${h.depth > 2? 'list-style-type:none;margin-left:10px;': 'list-style-type:none;'}">
			<a href="#${h.id}">${h.title}</a>
		</li>
		`)
		const finalMarkup = `
			<ul style="padding-left: 10px;">${htmlMarkup.join('')}</ul>
		`
		return finalMarkup
	}
	
	
	
}
//Initial data loading
$("#editor").val(sampleData);
updatePreview();

//editor and configures
$("#editor").on("input", function(){
	updatePreview();
});
$("#p-margin-t").on("input", function(){
	updatePreview();
});
$("#p-margin-l").on("input", function(){
	updatePreview();
});
$("#p-line-h").on("input", function(){
	updatePreview();
});
$("#p-font-size").on("input", function(){
	updatePreview();
});
$("#enable-custom").on("change", function() {
	updatePreview();
});
$("#enable-toc").on("change", function() {
	updatePreview();
})

$("#copy").click(function() {
	$("#copyArea").val($("#preview").html());
	$("#copyArea").focus();
	$("#copyArea").select();
	document.execCommand("copy");
	$(".alert-success").slideDown(100);
	setTimeout(function () {
		$(".alert-success").slideUp(100);
	}, 600);
});

$("#func-desc").mouseover(function() {
	$("#func-desc-content").css("display", "block");
});
$("#func-desc").mouseout(function() {
	$("#func-desc-content").css("display", "none");
});
$("#func-desc").on("touchend", function() {
	if ($("#func-desc-content").css("display") == "block") {
		$("#func-desc-content").css("display", "none");
	}
});

$("#enable-desc").mouseover(function() {
	$("#enable-desc-content").css("display", "block");
});
$("#enable-desc").mouseout(function() {
	$("#enable-desc-content").css("display", "none");
});
$("#enable-desc").on("touchend", function() {
	if ($("#enable-desc-content").css("display") == "block") {
		$("#enable-desc-content").css("display", "none");
	}
});
              
            
!
999px

Console