@פלמנמוני כתב בשיתוף | צ'אט ג'מיני חמוד:
א. כשמעתיקים קוד שהוא מביא על ידי הלחיצה על הסימון העתק שיש בתיבת הקוד הקוד לא מועתק עם חלוקה לשורות אלא ברצף.
וגם לפעמים הוא לא נמצא כלל בתוך בלוק קוד
סדרתי עוד על פי הקוד שהבאת וגם שדרגתי את הנראות
formatMessageContent(content) {
let formatted = content;
formatted = formatted.replace(/```([\s\S]*?)```/g, (match) => {
match = match.replace(/&/g, '&');
return match;
})
formatted = formatted.replace(/</g, '<').replace(/>/g, '>')
formatted = formatted.replace(/```(\w+)?([^a-zA-Z])([\s\S]*?)```/g, (match, lang, symbol, code) => {
lang = lang || 'javascript';
if (symbol !== '\n') {
code = symbol + code
}
console.log(symbol)
const escapedCode = code
.replace(/"/g, '"')
.replace(/'/g, ''');
return `<pre class="code-block">
<div class="title-code">
<button class="lang-code"> '${lang}' </button>
<button class="copy-code-btn" title="העתק קוד"><span class="material-icons">content_copy</span></button>
</div><code class="language-${lang}">${escapedCode}</code>
</pre>`;
});
formatted = formatted.replace(/`([^`]+)`/g, '<code>$1</code>');
formatted = formatted.replace(/\[([^\]]+)\]\((https?:\/\/[^\)]+)\)/g, '<a href="$2" target="_blank">$1</a>');
formatted = formatted.replace(/^### (.*)$/gm, '<h3>$1</h3>');
formatted = formatted.replace(/^## (.*)$/gm, '<h2>$1</h2>');
formatted = formatted.replace(/^# (.*)$/gm, '<h1>$1</h1>');
formatted = formatted.replace(/^- (.+)$/gm, '<li>$1</li>');
formatted = formatted.replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');
formatted = formatted.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
formatted = formatted.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
formatted = formatted.replace(/\*(.*?)\*/g, '<em>$1</em>');
formatted = formatted.replace(/__(.*?)__/g, '<u>$1</u>');
formatted = formatted.replace(/((?:\|.+\|(?:\n|$))+)/g, (table) => {
const rows = table.trim().split('\n');
let tableHtml = '<table>';
if (rows.length > 1 && rows[1].replace(/[^|]/g, '') === rows[1]) {
tableHtml += '<thead><tr>' +
rows[0].split('|').filter(Boolean).map(cell => `<th>${cell.trim()}</th>`).join('') +
'</tr></thead><tbody>';
for (let i = 2; i < rows.length; i++) {
tableHtml += '<tr>' +
rows[i].split('|').filter(Boolean).map(cell => `<td>${cell.trim()}</td>`).join('') +
'</tr>';
}
tableHtml += '</tbody>';
} else {
for (const row of rows) {
tableHtml += '<tr>' +
row.split('|').filter(Boolean).map(cell => `<td>${cell.trim()}</td>`).join('') +
'</tr>';
}
}
return tableHtml + '</table>';
});
// שמירת code blocks זמנית
const tempCodeBlocks = [];
formatted = formatted.replace(/<pre class="code-block">[\s\S]*?<\/pre>/g, (match) => {
const index = tempCodeBlocks.length;
tempCodeBlocks.push(match);
return `__TEMP_CODE_${index}__`;
});
// המרת מעברי שורות ל-<br> רק מחוץ ל-code blocks
formatted = formatted.replace(/\n/g, '<br>');
// החזרת code blocks
tempCodeBlocks.forEach((block, index) => {
formatted = formatted.replace(`__TEMP_CODE_${index}__`, block);
});
return formatted;
}
ובCCS
/* Copy code button in code block */
.copy-code-btn {
transform: translateY(-35px);
position: absolute;
left: 0rem;
top: 0.5rem;
background: none;
border: none;
color: var(--text-secondary);
cursor: pointer;
border-radius: 4px;
font-size: 1rem;
z-index: 2;
transition: background 0.2s;
}
.copy-code-btn:hover {
background: var(--hover-color);
color: var(--primary-color);
}
.lang-code {
position: absolute;
right: 0rem;
transform: translateY(-48px);
font-size: 1rem;
color: var(--text-secondary);
background-color:#ccc;
border-radius: 2px 2px 2px 2px;
border: none;
}
.title-code {
position: sticky;
left: 0;
height: 2px;
background-color: #ccc;
width: 100%;
margin-top: 22px;
}