[highlight_code lang=”python”]
h1 {
font-family: “Google Sans”, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: 700;
color: rgb(32, 33, 36);
font-size: 27px;
line-height: 32px;
}
h2.highlight-h2 {
font-family: “Google Sans”, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 24px;
line-height: 29px;
background-color: #05C066;
padding: 5px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border-radius: 5px;
position: relative;
overflow: hidden;
display: block;
}
h2.highlight-h2::before {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 10%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3));
animation: light-sweep 3s linear infinite;
z-index: 1;
transition: background 0.3s ease;
}
h2.highlight-h2:hover::before {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 127, 0, 0.5), rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(75, 0, 130, 0.5), rgba(143, 0, 255, 0.5));
animation: rainbow-sweep 3s linear infinite;
}
h2.highlight-h2:hover {
background-color: #04a55e;
font-size: 25px;
}
h3.highlight-h3 {
font-family: “Google Sans”, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: 500;
color: rgb(255, 255, 255);
font-size: 22px;
line-height: 27px;
background-color: #00AEEF;
padding: 5px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border-radius: 5px;
position: relative;
overflow: hidden;
display: block;
}
h3.highlight-h3::before {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 10%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3));
animation: light-sweep 3s linear infinite;
z-index: 1;
transition: background 0.3s ease;
}
h3.highlight-h3:hover::before {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 127, 0, 0.5), rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(75, 0, 130, 0.5), rgba(143, 0, 255, 0.5));
animation: rainbow-sweep 3s linear infinite;
}
h3.highlight-h3:hover {
background-color: #0094d3;
font-size: 23px;
}
h4.highlight-h4 {
font-family: “Google Sans”, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: 500;
color: rgb(255, 255, 255);
font-size: 20px;
line-height: 25px;
background-color: #EF1921;
padding: 5px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
border-radius: 5px;
position: relative;
overflow: hidden;
display: block;
}
h4.highlight-h4::before {
content: “”;
position: absolute;
top: 0;
left: -100%;
width: 10%;
height: 100%;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3));
animation: light-sweep 3s linear infinite;
z-index: 1;
transition: background 0.3s ease;
}
h4.highlight-h4:hover::before {
background: linear-gradient(90deg, rgba(255, 0, 0, 0.5), rgba(255, 127, 0, 0.5), rgba(255, 255, 0, 0.5), rgba(0, 255, 0, 0.5), rgba(0, 0, 255, 0.5), rgba(75, 0, 130, 0.5), rgba(143, 0, 255, 0.5));
animation: rainbow-sweep 3s linear infinite;
}
h4.highlight-h4:hover {
background-color: #d1171c;
font-size: 21px;
}
p {
font-family: “Google Sans Text”, Roboto, Arial, sans-serif;
font-style: normal;
font-weight: 400;
color: rgb(95, 99, 104);
font-size: 18px;
line-height: 23px;
}
/* Thay đổi dấu bullet mặc định thành ký tự “🍁” */
ul:not(.no-custom-bullet) {
list-style: none; /* Bỏ dấu bullet mặc định */
}
ul:not(.no-custom-bullet) li::before {
content: var(–bullet, “🍁”); /* Thay đổi nội dung từ biến CSS */
margin-right: 10px; /* Khoảng cách giữa ký tự và nội dung */
}
@keyframes light-sweep {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes rainbow-sweep {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
h1 {
font-size: 22px;
line-height: 27px;
}
h2.highlight-h2 {
font-size: 20px;
line-height: 25px;
}
h2.highlight-h2:hover {
font-size: 21px;
}
h3.highlight-h3 {
font-size: 18px;
line-height: 23px;
}
h3.highlight-h3:hover {
font-size: 19px;
}
h4.highlight-h4 {
font-size: 16px;
line-height: 21px;
}
h4.highlight-h4:hover {
font-size: 17px;
}
p {
font-size: 16px;
line-height: 21px;
}
}
.password-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
justify-content: center;
align-items: center;
}
.password-overlay.active {
display: flex;
}
.password-box {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
.password-box input {
margin-top: 10px;
padding: 10px;
width: 100%;
border: 1px solid #ccc;
border-radius: 5px;
}
.password-box button,
.password-box .cancel-button {
margin-top: 10px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
color: white;
}
.password-box button {
background-color: #05C066;
}
.password-box button:hover {
background-color: #04a55e;
}
.password-box .cancel-button {
background-color: #f44336;
}
.password-box .cancel-button:hover {
background-color: #d32f2f;
}
.password-error {
color: red;
margin-top: 10px;
}
‘;
echo ‘
‘;
echo ‘‘;
}
}
add_action(‘wp_head’, ‘highlight_h1_h2_h3_h4_p_custom_css_and_js’);
// Thêm class vào các thẻ h1, h2, h3 và h4 trong nội dung bài viết
function highlight_h1_h2_h3_h4_in_content($content) {
if (!is_home() && !is_front_page()) {
libxml_use_internal_errors(true);
$dom = new DOMDocument();
$dom->loadHTML(‘‘ . $content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xpath = new DOMXPath($dom);
foreach ($xpath->query(‘//h2’) as $h2) {
$h2->setAttribute(‘class’, ‘highlight-h2’);
}
foreach ($xpath->query(‘//h3’) as $h3) {
$h3->setAttribute(‘class’, ‘highlight-h3’);
}
foreach ($xpath->query(‘//h4’) as $h4) {
$h4->setAttribute(‘class’, ‘highlight-h4’);
}
$content = $dom->saveHTML();
libxml_clear_errors();
}
return $content;
}
add_filter(‘the_content’, ‘highlight_h1_h2_h3_h4_in_content’);
?>
[/highlight_code]
