Search
Reco Everything you wanna value. 자세히보기

카테고리 없음

인터넷 HTML/Web 에서 코드 예쁘게 출력하기 - prism.js (Code prettifier | Syntax Highlighter)

kipid 2025. 7. 9. 22:09
반응형
 # 인터넷 HTML/Web 에서 코드 예쁘게 출력하기 - prism.js (Code prettifier | Syntax Highlighter) Google code prettify 가 유지보수가 더이상 안되어서 prism.js 로 갈아탐. docuK SEE (Super Easy Edit) pure SEE (Super Easy Edit) of docuK (Markdown): 사용 설명서 (Manual | Documentation | Tutorial). 에 적용시켜 놓음. ## PH
  • 2025-07-05 : First posting.
## TOC ## CSS and js to be loaded ```[.lang-html] <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script> <script> Prism.highlightElement(element); Prism.highlightAll(); </script> ```/ ## HTML 코드 예시 ```[.lang-html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Prettier & Prism.js Example</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>Welcome to My Page</h1> </header> <main> <p>This is a sample paragraph.</p> <button id="myButton">Click Me</button> </main> <footer> <p>&copy; 2025 My Website</p> </footer> <script src="script.js"></script> </body> </html> ```/ ## CSS 코드 예시 ```[.lang-css] /* 기본 스타일 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: #333; background-color: #f8f8f8; margin: 0; padding: 0; } /* 헤더 스타일 */ header { background-color: #2c3e50; color: #fff; padding: 1rem 0; text-align: center; } h1 { margin: 0; font-size: 2.5em; } /* 버튼 스타일 */ #myButton { background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } #myButton:hover { background-color: #2980b9; } ```/ ## JavaScript 코드 예시 ```[.lang-js] document.addEventListener('DOMContentLoaded', () => { const myButton = document.getElementById('myButton'); if (myButton) { myButton.addEventListener('click', () => { alert('버튼이 클릭되었습니다!'); console.log('버튼 클릭 이벤트 발생!'); }); } else { console.warn('ID가 "myButton"인 요소를 찾을 수 없습니다.'); } // 간단한 비동기 함수 예시 async function fetchData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const data = await response.json(); console.log('데이터 가져오기 성공:', data); } catch (error) { console.error('데이터 가져오기 오류:', error); } } fetchData(); }); ```/ ## JAVA 코드 예시 ```[.scrollable.lang-java] package recoeve.db; import java.io.File; import java.util.ArrayList; import java.util.HashMap; import java.util.Map; import java.util.regex.Matcher; import java.util.regex.Pattern; public class FileMapWithVar { public static final String VERSION = "1.2.0"; public static final Pattern PTN_VARIABLE = Pattern.compile("\\{--[^\\{\\}]+?--\\}"); public static ArrayList<String> strToList(String fileStr) { if (fileStr == null) { return null; } int start = 0; Matcher matchReplacer = PTN_VARIABLE.matcher(fileStr); ArrayList<String> strList = new ArrayList<>(); while (start < fileStr.length()) { if (matchReplacer.find(start)) { strList.add(fileStr.substring(start, matchReplacer.start())); strList.add(matchReplacer.group()); start = matchReplacer.end(); } else { strList.add(fileStr.substring(start)); start = fileStr.length(); } } return strList; } public String replaceStr(ArrayList<String> strList, Map<String, String> varMap) { String strReplaced = ""; String replaced; for (int i = 0; i < strList.size(); i++) { if (i % 2 == 0) { strReplaced += strList.get(i); } else { replaced = varMap.get(strList.get(i)); if (replaced == null) { replaced = strList.get(i); } strReplaced += replaced; } } return strReplaced; } public final Map<String, Map<String, ArrayList<String>>> FILEMAP_TO_ARRAY_STR; // FILEMAP_TO_ARRAY_STR.get("fileName").get("lang") public FileMapWithVar() { FILEMAP_TO_ARRAY_STR = new HashMap<>(FileMap.TXT_FILEMAP_SIZE); for (File fileName : FileMap.TXT_FILENAMES) { String fileNameStr = fileName.getName(); Map<String, String> fileLangMap = FileMap.TXT_FILEMAP.get(fileNameStr); if (fileLangMap != null) { Map<String, ArrayList<String>> fileLangMapToStrArray = new HashMap<>(FileMap.FILE_LANGMAP_SIZE); fileLangMapToStrArray.put("df", strToList(fileLangMap.get("df"))); int colSize = FileMap.LANGMAP.getColSizeAtRow(0); for (int k = 2; k < colSize; k++) { String lang = FileMap.LANGMAP.get(0, k); if (!lang.equals("desc")) { fileLangMapToStrArray.put(lang, strToList(fileLangMap.get(lang))); } } FILEMAP_TO_ARRAY_STR.put(fileNameStr, fileLangMapToStrArray); } } } public String getFileWithLangAndVars(String fileName, String lang, Map<String, String> varMap) { Map<String, ArrayList<String>> fileLangMapToStrArray = FILEMAP_TO_ARRAY_STR.get(fileName); if (fileLangMapToStrArray == null) { return "File: " + fileName + " does not exist."; } ArrayList<String> strList = fileLangMapToStrArray.get(lang); if (strList == null) { strList = fileLangMapToStrArray.get("en"); } if (strList == null) { return "Lang: " + lang + " does not exist."; } return replaceStr(strList, varMap); } public static void main(String... args) { Map<String, String> varMap = new HashMap<>(); varMap.put("{--myIndex--}", "11111"); varMap.put("{--myId--}", "kipid"); varMap.put("{--userIndex--}", "10000"); varMap.put("{--userId--}", "id"); varMap.put("{--user email--}", "id@gmail.com"); varMap.put("{--myCatList--}", """ [Recoeve] static multiline [Music/Break]"""); varMap.put("{--catList--}", """ [IT/Programming] HTML CSS JavaScript"""); varMap.put("{--kipid-catList--}", """ [Poop] [Ding Dong]"""); FileMapWithVar fileMapWithVar = new FileMapWithVar(); System.out.println(fileMapWithVar.getFileWithLangAndVars("user-page.html", "ko", varMap)); // for (File fileName : FileMap.TXT_FILENAMES) { // System.out.println(fileName.getName()); // } } } ```/ ## RRA
  1. https://prismjs.com/
  2. 인터넷에서 예쁘게 코드 입력하기 (google code prettify)
반응형
저작자표시 비영리 변경금지 (새창열림)

'카테고리 없음'의 다른글

  • 현재글인터넷 HTML/Web 에서 코드 예쁘게 출력하기 - prism.js (Code prettifier | Syntax Highlighter)
  댓글에 http/https 링크 및 수식 (\ [ Outline 수식 \ ], \ ( inline 수식 \ ) :: \ 이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는 ``` 시작, ```/ 마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다. ```[.lang-js.scrollable.no-linenums] 같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다. .no-linenums 로 line numbering 을 없앨수도 있습니다.

  댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.
댓글들 rendering (단축키:N)
Handle comments.

티스토리툴바