Chia sẻ tiện ích blog và kiến thức xây dựng

Công cụ phân tích cú pháp HTML trên Blogger

Sử dụng mã hóa để chèn mã script HTML vào các bài đăng hoặc bài viết trên trang web.
Vui lòng chờ 0 giây...
Cuộn xuống hoặc nhấp vào đây để chuyển đến liên kết
Chúc mừng! Liên kết được tạo

Xin chào mọi người, nhân dịp này, mình sẽ chia sẻ với tất cả các bạn cách tạo công cụ phân tích cú pháp HTML trên Blogger.

Đối với tất cả các Blogger, sự hiện diện của các công cụ phân tích cú pháp HTML có thể rất hữu ích, đặc biệt là đối với các blog sử dụng mã hóa để chèn mã script HTML vào các bài đăng hoặc bài viết trên trang web.

Công cụ phân tích cú pháp HTML trên Blogger
Công cụ phân tích cú pháp HTML trên Blogger

Rất dễ dàng để tạo công cụ phân tích cú pháp HTML trên Blogger, tức là bạn phải sử dụng một trang tĩnh để tạo công cụ phân tích cú pháp HTML.

Vì vậy, bạn có thể dễ dàng đến đó và sử dụng nó. Nếu bạn muốn tạo công cụ phân tích cú pháp HTML trực tuyến này trên blog thì hãy đọc toàn bộ bài viết dưới đây.

Tạo công cụ phân tích cú pháp HTML trên Blogger

Bước 1: Trước hết Đăng nhập vào trang Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Trang.

Bước 3: Nhấp vào biểu tượng dấu cộng + bên cạnh nút 'TRANG MỚI'.

Bước 4: Nhấp vào 'Chế độ xem HTML'.

Bước 5: Sau đó sao chép mã từ tập lệnh bên dưới và dán nó vào đó.

<!--[ HTML parsing tool by Giahuy.net ]-->
<style>.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{background:rgba(255,255,255,.5);color:#fff}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-sm,.btn-xs{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:4px 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
#parser2{position:relative;display:block;clear:both;border-radius:4px;border:1px solid var(--sideBd-color);transition:all .6s}
#parser2 textarea#somewhere{width:100%;outline:none;height:240px;margin:0 auto;display:block;padding:20px;font-family:var(--fontCode);font-size:14px;border:0;border-radius:4px 4px 0 0;box-shadow:unset;resize: vertical; min-height: calc(100vh - 300px);background:transparent;color:var(--themeC)}
#parser2 .button-group{float:none;background:#ce2c90;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 4px 4px}
.collapse{display:none}
.alert-success{color:#3c763d;background-color:#dff0d8}
.alert{padding:10px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px}
button.closes{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1;z-index:2}
.closes{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.closes:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id='parser2'>
  <textarea id='somewhere' onfocusin='focusFunction()' placeholder='Viết/dán mã vào đây...'></textarea>
  <div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
    <button class='closes close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;' type='button'>
      <span aria-hidden='true'>×</span>
    </button>
    <h6>Sao chép thành công!</h6>
  </div>
  <div class='button-group'>
    <button class='btn btn-primary btn-sm btn-parse' onclick='convert();textareaReplaceLineBreaks("#somewhere");' type='button'>Phân tích mã</button>
    <button class='btn button-link btn-xs btn-info' data-clipboard-action='copy' data-clipboard-target='#somewhere' id='button-link' type='submit'>Sao chép mã</button>
    <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear2();'>Dọn dẹp</button>
  </div>
</div>
<script src='https://cdn.giahuy.net/widget/js/clipboard.min.js'></script>
<script type="text/javascript">
function convert() {
    var ele1 = document.getElementById("somewhere");
    var replaced;
    replaced = ele1.value;
    replaced = replaced.replace(/&/ig, "&amp;");
    replaced = replaced.replace(/</ig, "&lt;");
    replaced = replaced.replace(/>/ig, "&gt;");
    replaced = replaced.replace(/"/ig, "&quot;");
    replaced = replaced.replace(/'/ig, "&#039;");
    replaced = replaced.replace(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    
    ele1.value = replaced;
    document.getElementById("button-link")
        .style.display = "inline-block";
    document.getElementById("btn_clear")
        .style.display = "inline-block";
        document.getElementById("btn-reset")
        .style.display = "none";
}
function cdClear() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear2() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btn-reset")
        .style.display = "none";
}
function focusFunction() {
    document.getElementById("btn-reset").style.display = "block";
}
</script>
<script>
//<![CDATA[
var clipboard = new Clipboard(".button-link");
clipboard.on("success", function (o) {
    console.log(o), document.getElementById("btnInfo")
        .style.display = "block", document.getElementById("button-link")
        .style.display = "none", document.getElementById("btn-reset")
        .style.display = "none", document.getElementById("somewhere")
        .value = ""
}), clipboard.on("error", function (o) {
    console.log(o)
});
//]]>
</script>

Bước 6: Đặt tiêu đề cho trang, sau đó Xuất trang bằng cách nhấp vào Xuất bản.

Trên đây là hướng dẫn công cụ phân tích cú pháp HTML trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!

Copyright © www.giahuy.net

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.