이름:
메일:
가입일:
2022-06-06 00:12조회수: 1317[운영자]영이
코드를 강조해서 보여주는 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시간동안 커스터마이징 했기 때문입니다.
테스트끝~~
PHP로 사이트맵 자동 업데이트하기 (sitemap.xml)
검색엔진 최적화를 위해 구글 서치콘솔에 sitemap.xml을 제출했다.이 포트폴리오 겸 블로그는 글이 계속 포스팅 되기 때문에 일일히 수동으로 site...
HTML 페이지가 두 번 로딩되면서 로딩 속도가 느려질때 (Network waterfall twice times download)
현재 포트폴리오용 웹사이트 개발을 하던 나는 내 웹사이트가 뭔가 이상하다는 것을 발견했다.크롬의 개발자도구(F12)에서 Network 탭을 보면 내 웹사이트에서 ...
코드를 강조해서 보여주는 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();<
프론트엔드 블로그 겸 포트폴리오 제작완료(SSR)
공개용 포트폴리오를 제작할 때 구글에 검색이 되기 위해서는 SSR(Server Side Rendering)이 되어야 했다. SSR이란, 지금...
영이의 첫포스팅입니다^^
이건 섬머노트로 작성한 첫글입니다^^정말 기대가 되네요커스텀 하는데에 8시간이 걸렸습니다~~~그래도 나는 힘낼 수 있어요
댓글: 0