코드를 강조해서 보여주는 highlight.js

코드를 강조해서 보여주는 highlight.js 테스트입니다.

<!-- highlight.js -->
	<link rel="stylesheet" type="text/css" href="/css/default.min.css">
	<script src="/script/highlight.min.js"></script>
	<script>hljs.highlightAll();</script>

필요한 파일은 기본적으로 2개이며,

순서대로 

1. 강조할 컬러가 들어가있는 css

2. 관련 스크립트가 들어가있는 js파일 

마지막에 있는 <script>hljs.highlightAll();</script> 의 경우 

페이지 로딩이 완료되었을 때 

<pre><code></code></pre> 태그가 있다면 

알아서 하이라이팅 처리를 하게 된다.

(단, code태그에 language-html와 같은 class가 없다면

하이라이트 처리가 안 됨.)

<!-- highlight.js -->
	<link rel="stylesheet" type="text/css" href="/css/default.min.css">
	<link rel="stylesheet" type="text/css" href="/css/brackets.css">
	<script src="/script/highlight.min.js"></script>
	<script>hljs.highlightAll();</script>

개인적으로 커스텀한 어도비 브라켓 테마를 추가하면 

이렇게 네 줄로 코드의 작성이 끝나게 된다.

function RealTimeImageUpdate(files, editor) {
	var status = false;
	var reg = /(.*?).(gif|jpg|png|jpeg)$/; //허용할 확장자
//				console.log(files)
	var formData = new FormData();
	var fileArr = Array.prototype.slice.call(files);
	var filename = "";
	var fileCnt = 0;
	fileArr.forEach(function(f) {
		filename = f.name;
		if (filename.match(reg)) {
			formData.append("file[]", f);
			fileCnt++;
		}
	});
	formData.append("tempFolder", $("#tempFolder").val());
	if (fileCnt <= 0) {
		alert("파일은 gif, png, jpg 파일만 등록해 주세요.");
		return;
	} else {


		axios.post("/php/temp_image.php", formData, {
		  headers: {
			"Content-Type": "multipart/form-data",
		  },
		}).then(rs => {
//						console.log(rs.data)
			var data = rs.data;
			for (let x = 0; x < data.length; x++) {
				var img = $("<img>").attr({
					src: data[x]
				});
				$(editor).summernote("pasteHTML", `<img alt="${filename}" class="uploaded_img sm-width100" src=${data[x]} />`);
			}
		}).catch(err=>console.log(err))
	}
}

브라켓 테마로 보이는건

1시간동안 커스터마이징 했기 때문입니다.

테스트끝~~