# 코드 블록 가독성이 좋아졌어요!

코드 블록에 58개 언어 선택 옵션과 읽기 편의 기능이 추가되어, 개발 문서나 블로그 등을 더 깔끔하게 보여줄 수 있어요. 언어 규칙에 따라 다른 색상이 적용되고 줄 번호를 표시할 수 있어 읽기 편해졌어요. 블록 안에 탭을 추가하거나 긴 코드는 접어서 보여줄 수 있어, 코드 예시가 많아도 페이지를 깔끔하게 유지할 수 있요고.

Reference code snippets for supported programming languages

<!-- slashpage-code-tabs:start -->
<!-- slashpage-code-tab-title:JavaScript -->
```javascript
const projectName = "Code Block Rendering Test For Long Lines And Syntax Highlighting Across Multiple User Interfaces";
const users = ["John Wick", "Jordan Smith", "Taylor Brown"];

function generateStatusMessage(userName, index, projectName) {
  const timestamp = new Date().toISOString();
  return `[${timestamp}] User ${index + 1} named ${userName} is currently validating syntax highlighting, line wrapping behavior, copy functionality, and responsive rendering within ${projectName}.`;
}

users.forEach((userName, index) => {
  console.log(generateStatusMessage(userName, index, projectName));
});

console.log("All rendering checks completed successfully without detecting any unexpected formatting issues.");
```
<!-- slashpage-code-tab-title:Mermaid -->
```mermaid
flowchart TD
  A[User Opens Language Selector] --> B[Language List Is Displayed Correctly]
  B --> C{Language Selected Successfully}
  C -->|Yes| D[Code Block Header Updates To Selected Language]
  C -->|No| E[Fallback Language Is Applied Automatically]
  D --> F[Paste Long Sample Code Into Editor]
  E --> F
  F --> G{Line Exceeds Available Width}
  G -->|Yes| H[Verify Horizontal Scrolling Or Line Wrapping Behavior]
  G -->|No| I[Verify Layout Consistency And Spacing]
  H --> J[Test Copy Button Functionality]
  I --> J
  J --> K[Record Results And Create Follow Up Issues]
```
<!-- slashpage-code-tab-title:Python -->
```python
project_name = "Code Block Rendering Test For Long Lines And Syntax Highlighting Across Multiple User Interfaces"

users = [
    "John Wick",
    "Jordan Smith",
    "Taylor Brown"
]

def generate_status_message(user_name, index):
    timestamp = "2026-01-01T12:00:00Z"
    return f"[{timestamp}] User {index + 1} named {user_name} is validating line wrapping, syntax highlighting, copy behavior, and overall rendering quality."

for index, user_name in enumerate(users):
    print(generate_status_message(user_name, index))

print("All rendering checks completed successfully without detecting any formatting issues.")
```
<!-- slashpage-code-tab-title:Java -->
```java
import java.time.Instant;
import java.util.Arrays;
import java.util.List;

public class RenderingTestApplication {
    public static void main(String[] args) {
        String projectName = "Code Block Rendering Test For Long Lines And Syntax Highlighting Across Multiple User Interfaces";

        List<String> users = Arrays.asList(
            "John Wick",
            "Jordan Smith",
            "Taylor Brown"
        );

        for (int index = 0; index < users.size(); index++) {
            String message = String.format(
                "[%s] User %d named %s is validating syntax highlighting, copy functionality, responsive rendering, and line wrapping within %s.",
                Instant.now(),
                index + 1,
                users.get(index),
                projectName
            );

            System.out.println(message);
        }
    }
}
```
<!-- slashpage-code-tab-title:TypeScript -->
```typescript
interface RenderingConfiguration {
  language: string;
  showLineNumbers: boolean;
  wrapLongLines: boolean;
  enableCopyButton: boolean;
}

const configuration: RenderingConfiguration = {
  language: "TypeScript",
  showLineNumbers: true,
  wrapLongLines: true,
  enableCopyButton: true,
};

function generateSummary(config: RenderingConfiguration): string {
  return `Testing ${config.language} with line numbers enabled, long line wrapping enabled, and copy button functionality enabled for user validation.`;
}

console.log(generateSummary(configuration));
```
<!-- slashpage-code-tab-title:SQL -->
```sql
SELECT
  users.id AS user_identifier,
  users.full_name AS user_full_name,
  users.email_address AS user_email_address,
  code_blocks.language AS selected_language,
  code_blocks.show_line_numbers AS line_numbers_enabled,
  code_blocks.wrap_long_lines AS line_wrapping_enabled,
  code_blocks.created_at AS creation_timestamp
FROM users
INNER JOIN code_blocks
  ON code_blocks.owner_id = users.id
WHERE users.is_active = TRUE
  AND code_blocks.language IN ('JavaScript', 'TypeScript', 'Python', 'SQL', 'HTML', 'CSS')
ORDER BY code_blocks.created_at DESC, users.full_name ASC
LIMIT 100;
```
<!-- slashpage-code-tab-title:HTML -->
```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Code Block Rendering Test Document</title>
</head>
<body>
  <main class="rendering-test-container">
    <h1>Code Block Rendering Validation Example</h1>
    <p>
      This paragraph is intentionally long so that developers can verify line wrapping,
      syntax highlighting, horizontal scrolling behavior, and responsive rendering.
    </p>
    <button aria-label="Copy the code sample to the clipboard">
      Copy Example
    </button>
  </main>
</body>
</html>
```
<!-- slashpage-code-tab-title:CSS -->
```css
.rendering-test-container {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(420px, 2fr);
  gap: 24px;
  max-width: 1280px;
  margin: 48px auto;
  padding: 32px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.rendering-test-container button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.18);
}
```
<!-- slashpage-code-tab-title:Json -->
```json
{
  "projectName": "Code Block Rendering Test For Long Lines And Syntax Highlighting Across Multiple User Interfaces",
  "owner": {
    "name": "John Wick",
    "email": "john@example.com",
    "role": "product_tester"
  },
  "settings": {
    "showLineNumbers": true,
    "wrapLongLines": true,
    "enableCopyButton": true,
    "theme": "dark"
  },
  "supportedLanguages": [
    "JavaScript",
    "TypeScript",
    "Python",
    "SQL",
    "HTML",
    "CSS",
    "Bash",
    "JSX",
    "JSON",
    "Markdown"
  ]
}
```
<!-- slashpage-code-tab-title:Markdown -->
```markdown
# Code Block Rendering Validation Guide

This document is intended to validate syntax highlighting, line wrapping behavior, copy functionality, and responsive rendering across desktop and mobile devices.

## Validation Checklist

- [x] Language label is displayed correctly.
- [x] Copy button copies the entire content.
- [x] Long lines render correctly without unexpected truncation.
- [x] Horizontal scrolling behaves consistently across browsers.
- [ ] Mobile rendering has been fully validated.

### Reference Link

https://example.com/code-block-rendering-validation
```
<!-- slashpage-code-tabs:end -->

For the site tree, see the [root Markdown](https://slashpage.com/slashpage-kr.md).