- 2025-07-05 : First posting.
<!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>© 2025 My Website</p>
</footer>
<script src="script.js"></script>
</body>
</html>
/* 기본 스타일 */
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;
}
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();
});
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());
// }
}
}
<pre><code></code></pre> nesting 이 없는 추가 처리.
예전엔 Google code prettify 를 썼었어서, <pre><code></code></pre> nesting 없이 바로 <pre class="prettyprint scrollable lang-js"></pre> 안에 코드를 넣으면 pretty-printed 되게 만들었었음.
Backward 호환을 위해서 pre tag 하나만 써서 적은 code 들도 prettyprint 되도록 만듬.
예제:
다음과 같이 작성하면
```[.scrollable.lang-html]
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());
// }
}
}
```/
, 아래와 같이 출력됩니다.
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
반응형
http/https 링크및 수식 (\ [ Outline 수식 \ ],\ ( inline 수식 \ )::\이후 띄어쓰기 없이) 을 넣으실 수 있습니다. 또한 code 는```시작,```/마지막으로 감싸 주시면 pretty-printed 되어서 나타납니다.```[.scrollable.lang-js]같이 언어를 선택해 주실수도 있고, 긴 수식의 경우 scroll bar 가 생기게 만드실 수도 있습니다.댓글 입력 후 rendering 된 형태를 보시려면, Handle CmtZ (단축키: N) 버튼을 눌러주세요. 오른쪽 아래 Floating Keys 에 있습니다. 아니면 댓글 젤 아래에 버튼이 있습니다.