PHP冒泡排序代码如何在HTML中优雅展示
在Web开发中，我们经常需要将服务器端生成的代码（如PHP代码）在前端HTML页面中清晰地展示出来，特别是对于教学或文档分享场景，本文将详细介绍如何将PHP冒泡排序的代码在HTML页面中美观、可读地展示出来。
使用pre标签与代码高亮
最简单直接的方法是使用HTML的<pre>标签保留代码格式,并结合CSS进行样式美化：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">PHP冒泡排序代码展示</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
}
.code-container {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
}
pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
.comment {
color: #6272a4;
}
.keyword {
color: #ff79c6;
}
.function {
color: #50fa7b;
}
.string {
color: #f1fa8c;
}
</style>
</head>
<body>
<h1>PHP冒泡排序实现</h1>
<div class="code-container">
<pre>
<span class="comment"><?php</span>
<span class="comment">/* 冒泡排序实现 */</span>
<span class="keyword">function</span> <span class="function">bubbleSort</span>(<span class="variable">$array</span>) {
<span class="variable">$length</span> = <span class="keyword">count</span>(<span class="variable">$array</span>);
<span class="keyword">for</span> (<span class="variable">$i</span> = 0; <span class="variable">$i</span> < <span class="variable">$length</span>; <span class="variable">$i</span>++) {
<span class="keyword">for</span> (<span class="variable">$j</span> = 0; <span class="variable">$j</span> < <span class="variable">$length</span> - 1 - <span class="variable">$i</span>; <span class="variable">$j</span>++) {
<span class="keyword">if</span> (<span class="variable">$array</span>[<span class="variable">$j</span>] > <span class="variable">$array</span>[<span class="variable">$j</span> + 1]) {
<span class="comment">// 交换元素</span>
<span class="variable">$temp</span> = <span class="variable">$array</span>[<span class="variable">$j</span>];
<span class="variable">$array</span>[<span class="variable">$j</span>] = <span class="variable">$array</span>[<span class="variable">$j</span> + 1];
<span class="variable">$array</span>[<span class="variable">$j</span> + 1] = <span class="variable">$temp</span>;
}
}
}
<span class="keyword">return</span> <span class="variable">$array</span>;
}
<span class="comment">// 示例使用</span>
<span class="variable">$numbers</span> = [64, 34, 25, 12, 22, 11, 90];
<span class="variable">$sortedNumbers</span> = <span class="function">bubbleSort</span>(<span class="variable">$numbers</span>);
<span class="keyword">echo</span> <span class="string">"排序前: "</span> . <span class="keyword">implode</span>(<span class="string">", "</span>, <span class="variable">$numbers</span>) . <span class="string">"\n"</span>;
<span class="keyword">echo</span> <span class="string">"排序后: "</span> . <span class="keyword">implode</span>(<span class="string">", "</span>, <span class="variable">$sortedNumbers</span>);
<span class="comment">?></span>
</pre>
</div>
</body>
</html>
使用第三方代码高亮库
对于更专业的代码展示，可以使用现成的代码高亮库，如Prism.js或highlight.js：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">PHP冒泡排序代码展示 - Prism.js</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css" rel="stylesheet" />
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
}
.code-container {
background-color: #2d2d2d;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
}
h1 {
color: #333;
}
</style>
</head>
<body>
<h1>PHP冒泡排序实现 - 使用Prism.js</h1>
<div class="code-container">
<pre><code class="language-php"><?php
/* 冒泡排序实现 */
function bubbleSort($array) {
$length = count($array);
for ($i = 0; $i < $length; $i++) {
for ($j = 0; $j < $length - 1 - $i; $j++) {
if ($array[$j] > $array[$j + 1]) {
// 交换元素
$temp = $array[$j];
$array[$j] = $array[$j + 1];
$array[$j + 1] = $temp;
}
}
}
return $array;
}
// 示例使用
$numbers = [64, 34, 25, 12, 22, 11, 90];
$sortedNumbers = bubbleSort($numbers);
echo "排序前: " . implode(", ", $numbers) . "\n";
echo "排序后: " . implode(", ", $sortedNumbers);
?></code></pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-php.min.js"></script>
</body>
</html>
动态生成PHP代码并展示
如果你需要在PHP文件中动态生成并展示代码,可以使用以下方式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">PHP冒泡排序动态展示</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
line-height: 1.6;
margin: 20px;
background-color: #f4f4f4;
}
.code-container {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
}
pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<h1>PHP冒泡排序动态生成代码</h1>
<div class="code-container">
<pre>
<?php
/* 冒泡排序实现 */
function bubbleSort($array) {
$length = count($array);
for ($i = 0; $i < $length; $i++) {
for ($j = 0; $j < $length - 1 - $i; $j++) {
if ($array[$j] > $array[$j + 1]) {
// 交换元素
$temp = $array[$j];
$array[$j] = $array[$j + 1];
$array[$j + 1] = $temp;
}
}
}
return $array;
}
// 示例使用
$numbers = [64, 34, 25, 12, 22, 11, 90];
$sortedNumbers = bubbleSort($numbers);
echo "排序前: " . implode(", ", $numbers) . "\n";
echo "排序后: " . implode(", ", $sortedNumbers);
?>
</pre>
</
还没有评论，来说两句吧...