PHP/HTML/CSS中代码与文本样式区分及TinyMCE存储样式处理问题

Hey there! Let's figure out how to make your text and code snippets look distinct when rendering content from your MySQL database. Since your stored content already uses <p> for regular text and <code> for code blocks, we can build directly on that structure with PHP, HTML, and CSS.

1. Pull and Output Content with PHP #

First, you'll need to fetch the stored content from MySQL and render it in your HTML. Make sure to handle any HTML entity encoding if you escaped content before storing it. Here's a quick example using PDO:

<?php
// Connect to your database (adjust credentials as needed)
$dbConnection = new PDO('mysql:host=localhost;dbname=your_database', 'your_username', 'your_password');

// Fetch the content (replace with your table/column names)
$stmt = $dbConnection->prepare("SELECT content FROM your_table WHERE id = :id");
$stmt->execute(['id' => 1]); // Replace 1 with your target record ID
$content = $stmt->fetchColumn();

// If you stored escaped HTML entities, decode them here
$content = htmlspecialchars_decode($content);
?>

<!-- Render the content in your HTML -->
<div class="content-wrapper">
    <?php echo $content; ?>
</div>

2. Style Text and Code Differently with CSS #

Now let's use CSS to make regular text and code blocks visually distinct. We'll target the <p> tags for text and <code> tags for code:

/* Base styles for regular text paragraphs */
.content-wrapper p {
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #2d3748;
    margin-bottom: 1rem;
}

/* Styles for code snippets */
.content-wrapper code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    background-color: #f7fafc;
    color: #c53030;
    display: block;
    white-space: pre-wrap; /* Preserve line breaks and indentation */
    padding: 1rem;
    margin: 1rem 0;
    border-left: 4px solid #3182ce;
    border-radius: 4px;
    overflow-x: auto; /* Handle long code lines */
}

Here's what this does:

• Regular text uses a clean, readable sans-serif font with good line height for comfortable reading.
• Code gets a monospaced font (standard for code), a light gray background, red text, and a blue left border to make it instantly stand out from regular text.
• white-space: pre-wrap keeps the formatting (like indentation and line breaks) that you set in TinyMCE, so your code stays structured.
• overflow-x: auto adds a horizontal scrollbar for long code lines, preventing them from breaking your page layout.

3. Bonus: Add Syntax Highlighting (Optional) #

If you want more polished code highlighting (like color-coding keywords, variables, etc.), you can use a front-end library like Prism.js or highlight.js. Here's how to do it without external links:

1. Download the library's CSS and JS files to your project directory.
2. Link them in your HTML:

<!-- Link local Prism CSS -->
<link rel="stylesheet" href="/assets/css/prism.css">

<!-- Link local Prism JS and language-specific plugin (e.g., PHP) -->
<script src="/assets/js/prism.js"></script>
<script src="/assets/js/prism-php.js"></script>

3. Update your <code> tags to include a language class, like <code class="language-php">. This tells the library how to apply syntax highlighting to the code.

Quick Notes for Safety & Compatibility #

• Security: If users can submit content, use a library like HTMLPurifier to filter the output and prevent XSS attacks.
• Browser Support: Avoid relying on newer CSS selectors like :has() if you need to support older browsers—styling the <code> tag directly is more reliable.
• TinyMCE Setup: You can configure TinyMCE to automatically add language classes to <code> tags when users insert code, which makes syntax highlighting easier later.

内容的提问来源于stack exchange，提问作者user2855148