文章内容高亮样式代码

本文分享了哔哔一二自用的一些文章美化代码，主要是给指定文字内容添加一些样式，以高亮突出重要性。

这是一段黑色文字的代码效果

这是一段蓝色文字的代码效果

这是一段红色文字的代码效果

这是一段🔗 链接文字的代码效果

红色提醒框

绿色提醒框

浅色提醒框

紫色提醒框

资源介绍文章介绍内容

代码使用方法

步骤一：在functions.php中添加按钮代码，添加按钮代码的方法自行查看之前发布的文章。

相关按钮代码如下，自行取舍你需要的按钮代码，并不一定要全部复制。代码放置位置参考上方的相关文章自行了解

add_action('after_wp_tiny_mce', 'bolo_after_wp_tiny_mce');
 
 function bolo_after_wp_tiny_mce($mce_settings) {
     ?>
     <script type="text/javascript">
         QTags.addButton( 'blackfont', '黑色文字', '<span class="blackfont">','</span>');
         QTags.addButton( 'bluefont', '蓝色文字', '<span class="bluefont">','</span>' );
         QTags.addButton( 'redfont', '红色文字', '<span class="redfont">','</span>' );
         QTags.addButton( 'linkfont', '链接文字', '<span class="linkfont">🔗 ','</span>' );
         QTags.addButton( 'tipqian', '浅色提醒', '<span id="tip-qian">','</span>' );
         QTags.addButton( 'tiphong', '红色提醒', '<span id="tip-hong">','</span>' );
         QTags.addButton( 'tiplv', '绿色提醒', '<span id="tip-lv">','</span>' );
         QTags.addButton( 'tipzi', '紫色提醒', '<span id="tip-zi">','</span>' );
         QTags.addButton( 'tipjianjie', '文章介绍', '<span id="diy-tip-jieshao"><span id="tip-title">资源介绍</span><span id="tip-content">资源内容</span></span>' );
     </script>
     <?php
 }

相关样式代码如下，自行取舍你需要的代码。样式代码放到style.css中即可，自己做好注释，方便后续查找

/*黑色文字*/
.blackfont {
    color: #ffffff;
    padding: 2px 5px;
    background-color: #222528eb;
    border-radius: 3px;
    font-size: 14px;
    margin: 0 3px;
    font-weight: 600;
}

/*蓝色文字*/
.bluefont {
    color: #4c4cff;
    padding: 2px 5px;
    background-color: #0000FF26;
    border-radius: 3px;
    font-size: 14px;
    margin: 0 3px;
    font-weight: 600;
}

/*链接文字*/
.linkfont {
    color: #4c4cff;
    padding: 2px 5px;
    background-color: #0000FF26;
    border-radius: 3px;
    font-size: 14px;
    margin: 0 3px;
    font-weight: 600;
    transition: all .4s ease-out;
}

.linkfont:hover {

    background-color: #0000ff80;
    transition: all .4s ease-out;
}

.linkfont:hover a {
    color: #f4f4f4 !important;
    transition: all .4s ease-out;
}

/*红色文字*/
.redfont {
    color: #ffffff;
    padding: 2px 5px;
    background-color: #f71a12d4;
    border-radius: 3px;
    font-size: 14px;
    margin: 0 3px;
    font-weight: 600;
}

/* 浅色提醒 */
#tip-qian {
    background-color: #FFDEE9;
    background-image: linear-gradient(0deg, #ffdee9c4 0%, #b5fffc8f 100%);
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0 10px 0;
}

/* 红色提醒 */
#tip-hong {
    background-color: #ff9a8b66;
    background-image: linear-gradient(220deg, #FF9A8B 0%, #ff6a8838 55%, #FF99AC 100%);
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0 10px 0;
}

/* 绿色提醒 */
#tip-lv {
    color: #eeeeee;
    /* 绿色提醒的文字颜色 */
    box-shadow: 6px 0 12px -5px rgb(68, 110, 92), -6px 0 12px -5px rgb(204, 212, 163);
    background-image: linear-gradient(102deg, rgba(68, 110, 92, 1) 17.4%, rgba(107, 156, 120, 1) 49.3%, rgba(154, 183, 130, 1) 83.4%, rgba(247, 237, 191, 1) 110.3%);
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0 10px 0;
}

/* 紫色提醒 */
#tip-zi {
    color: #ffffff;
    box-shadow: 6px 0 12px -5px rgb(175, 160, 208), -6px 0 12px -5px rgba(177, 161, 207, 0);
    background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(95, 117, 227, 1) 0%, rgba(188, 167, 205, 1) 90%);
    padding: 10px;
    border-radius: 3px;
    display: inline-block;
    margin: 0px 0 10px 0;
}

/*文章简介介绍专用*/
#diy-tip-jieshao {
    background-color: #FFDEE9;
    background-image: linear-gradient(344deg, #ffdee9c4 0%, #17cd688f 100%);
    color: #393535;
    overflow: hidden;
    border-radius: 3px;
    padding: 8px 15px;
    box-shadow: 6px 0 6px -1px rgba(0, 0, 0, 0.1), -6px 0 6px -1px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}

#tip-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

#tip-content {
    text-indent: 18px;
}