什么，如何以及何时使用静态格式，自定义印迹格式和格式？

Question

DESCRIPTION

我正在尝试创建用于文本突出显示的内联污点。我知道羽毛笔上的this feature is already present。但是在我的实现中，我想根据分配的突出显示类型为html元素分配一个不同的值。这是我得到的：

let Inline = Quill.import('blots/inline');

class TextHighlight extends Inline {
    static create(value) {
        let node = super.create();
        if(!value || value < 1) return node;

        if(value == 5){
            node.style.color = 'rgb(225, 225, 225)';
        }
        else {
            node.style.borderRadius = '2px';
            node.style.padding = '2px';

            if(value == 1){ node.style.background = 'rgb(254, 255, 171)'; }
            if(value == 2){ node.style.background = 'rgb(255, 171, 171)'; }
            if(value == 3){ node.style.background = 'rgb(171, 207, 255)'; }
            if(value == 4){ node.style.background = 'rgb(178, 255, 171)'; }
        }

        node.setAttribute('data-value' , value);
        return node;
    }

    formats() {
        console.log('#formats()');
        let result = this.domNode.getAttribute('data-value');
        return result ? result : 0;
    }
}

TextHighlight.blotName = 'texthighlight';
TextHighlight.tagName = 'span';

我的删除/添加功能：

function highlightSelectedText(value) {
   if (value < 0 || value > 5) return false;

   var range = quill.getSelection();

   if (range && range.length > 0) {
      if (value > 0) {
         quill.formatText(
            range.index,
            range.length,
            'texthighlight',
            value,
            true);
      }
      else {
         quill.formatText(range.index, range.length, 'texthighlight', false, false);
      }
   }
}

最后创建了Quill实例：

var toolbarOptions = {
    container: '#toolbar-container',
    handlers: {
        'texthighlight': function (value) {
            highlightSelectedText(value);
        }
    }
};

var quill = new Quill('#editor', {
    theme: 'bubble',
    modules: {
        toolbar: toolbarOptions
    }
});

问题

1. 突出显示的文本片段具有以下增量：

...
{
   "attributes": {
      "0": "3"
   },
   "insert": "highlighted text"
},
...

“ texthighlight”应该显示而不是0，例如：

...
{
   "attributes": {
      "texthighlight": "3"
   },
   "insert": "highlighted text"
},
...

2. 如果我多次套用格式，它将开始累积，将标记放入标记内。例如：

<span class="texthighlight"><span class="texthighlight"><span class="texthighlight"><span class="texthighlight"></span></span></span></span>

预期的行为是仅显示一个亮点。

3. 我无法删除格式。

结论

毫无疑问，我缺乏有关如何正确实施此方法的知识。我可以在其他情况下创建更简单的印迹，但是现在我真的对覆盖某些印迹方法感到困惑。例如，以下列表显示了我的意思，以及我对每种方法的了解：

• static formats(node)：返回由domNode表示的格式。当索引在格式化范围内时，调用选择事件。
• formats()：返回此Blot表示的格式。它用于Delta生成。当索引在格式化范围内时，调用选择事件。
• format(format , value)：对此格式化应用格式化。

在演示的突出显示实现中，只有formats()和create(value)被调用。我知道如何实现这些方法中的每一个an example，但是我没有得到想要的行为。我认为这是因为我不知道如何准确地实现它们。有人可以回答我他们的实际工作，何时被召唤以及他们应该如何表现（被实施）吗？

有人可以帮我吗？ ：（

Answer 1

似乎我设法以某种方式获得了预期的结果。 我在这里回答，但我认为它不正确，因为它不完整。获得了预期的结果，但是我仍然无法理解事情的工作方式或原因。理解过程变得很基础，尤其是在将来需要更改代码的情况下。您可以在下面查看整个项目的代码。要测试，只需运行它。

我剩下的问题是：

1. formats和static formats(domNode)有什么区别？如果你观察代码执行，它们被调用了几次，static formats(domNode)被调用了两次。这正常吗？我不知道，这就是为什么我要问。
2. 在函数highlightSelectedText(hl)中，为什么hl与假值？这是怎么发生的？
3. 应用格式化时，使用create。什么时候将其删除，将调用format(format, value)。有些代码片段（内部格式）是永远不会到达的。不应该申请和删除格式是仅format的工作？为什么我必须改变在两个不同位置的DOM元素？

我想我可以通过查看toolbar module source code来找到数字2的答案。但是我不太确定。如果我能解决所有问题，我将回到这里编辑此答案，好吗？我知道其他人也可能有相同的问题。

// #################################################################################
//                                                                             TABS
// #################################################################################

/** See: https://www.w3schools.com/howto/howto_js_tabs.asp */
function openTab(evt, tabName) {
    // Declare all variables
    var i, tabcontent, tabButtons;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tab-button" and remove the class "active"
    tabButtons = document.getElementsByClassName("tab-button");
    for (i = 0; i < tabButtons.length; i++) {
        tabButtons[i].className = tabButtons[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    let openTabContent = document.getElementById(tabName);
    openTabContent.style.display = "block";
    evt.currentTarget.className += " active";

    updateOpenTab(openTabContent);
}

function updateOpenTab(tabContent) {
    if (!tabContent) {
        if (!(tabContent = getActiveTabContent())) return false;
    }

    // DELTA
    if (tabContent.id === 'tab-content-delta') {
        // Set delta length (#tab-content-delta > p)
        let p = tabContent.children[0];
        p.innerHTML = 'Tamanho Delta: ' + quill.getLength();
        p.style.padding = '4px 6px';

        // Set data (#tab-content-delta > pre > code)
        let code = tabContent.children[1].children[0];
        code.innerHTML = JSON.stringify(getContentDelta(), null, 2);

        hljs.highlightBlock(code);
    }
    // TEXT
    if (tabContent.id === 'tab-content-text') {
        // #tab-contnet-text > pre > code
        let code = tabContent.children[0].children[0];
        code.innerHTML = getContentText();

        hljs.highlightBlock(code);
    }
    // HTML
    if (tabContent.id === 'tab-content-html') {
        // #tab-content-html > pre > code
        let code = tabContent.children[0].children[0];
        code.innerHTML = getContentHTML().replace(/</gi, '&lt;');

        hljs.highlightBlock(code);
    }
}

/** See: https://stackoverflow.com/a/21696585 */
function isHidden(el) {
    if (!el) return true;
    return (el.offsetParent === null)
}

function getActiveTabContent() {
    let tabContents = document.querySelectorAll('.tab-content');
    for (let item of tabContents) {
        if (!isHidden(item)) {
            return item;
        }
    }
    return false;
}

// #################################################################################
//                                                                            QUILL
// #################################################################################

let Inline = Quill.import('blots/inline');

/* Try using console.log(...) to find out the call order of each method. Note that 
   formatting in the HTML element happens through the create(value) method, and 
   removal through format(format, value).*/
class TextHighlight extends Inline {

    // Remember, there is:
    // super.formats
    // super.domNode

    static create(value) {
        console.log('Texthighlight: static create(' + value + ')');
        let node = super.create(value);

        // Add highlight.
        if (value && (value > 0 && value < 6)) {
            node.classList.add('ql-texthighlight-' + value);
            node.setAttribute('data-value', value);
        }

        return node;
    }

    static formats(domNode) {
        console.log('Texthighlight: static formats(' + domNode.tagName + ')');
        let data = domNode.getAttribute('data-value');

        if (!data || data < 1 || data > 5) {
            return super.formats(domNode);
        }
        else {
            return data;
        }
    }

    /** See: https://github.com/quilljs/parchment#example */
    formats() {
        console.log('Texthighlight: formats()');
        let formats = super.formats();
        // Apparently, this is used for Delta creation.
        formats['texthighlight'] = TextHighlight.formats(this.domNode);
        return formats;
    }

    format(format, newValue) {
        console.log('Texthighlight: format(' + format + ' , ' + newValue + ')');
        let oldValue = TextHighlight.formats(this.domNode);

        // Remove
        if ((!format || format !== TextHighlight.blotName) ||
            (newValue == false || newValue == 0)) {
            super.format(format, false);
        }
        // Add
        else if (newValue && (newValue > 0 && newValue < 6)) {
            let node = this.domNode;

            // Remove previous highlight.
            if((oldValue && oldValue > 0) && (oldValue != newValue)){
                node.classList.remove('ql-texthighlight-' + oldValue);
            }

            node.classList.add('ql-texthighlight-' + newValue);
            node.setAttribute('data-value', newValue);
        }
    }
}

TextHighlight.blotName = 'texthighlight';
TextHighlight.tagName = 'span';

Quill.register(TextHighlight);
// Does the same as above.
// Quill.register('formats/texthighlight' , TextHighlight);

/** See: https://quilljs.com/docs/api/#getcontents */
function getContentDelta() {
    return quill.getContents();
}

/** See: https://github.com/quilljs/quill/issues/2698 */
function getContentText() {
    return quill.getContents().ops.reduce((text, op) => {
        if (typeof op.insert === 'string') {
            return text + op.insert;
        }
        // If it is not a string, the newline character is set, which has
        // a length of only 1 character.
        else {
            return text + '\n';
        }
    }, '');
}

/** See: https://github.com/quilljs/quill/issues/903#issuecomment-243844178 */
function getContentHTML() {
    return quill.root.innerHTML;
}

// #################################################################################
//                                                                        HIGHLIGHT
// #################################################################################

function highlightSelectedText(hl) {
    // Is hl (highlight) a value between 0 and 5 (inclusive)?
    if (hl < 0 || hl > 5) return false;

    var range = quill.getSelection();

    // Check selection...
    if (range && range.length > 0) {
        // Add
        if (hl > 0) {
            console.log('ADD - [hl: ' + hl + ', in: ' + range.index + ', le: ' + range.length+ ']');
            quill.format('texthighlight', hl);
        }
        // Remove (why value/hl comes false? How this happens?)
        else {
            console.log('REMOVE - [hl: ' + hl + ', in: ' + range.index + ', le: ' + range.length+ ']');
            quill.format('texthighlight', false);
        }
    }
}

// #################################################################################
//                                                                             MAIN
// #################################################################################

$(document).ready(function () {

    var toolbarOptions = {
        container: '#toolbar-container',
        handlers: {
            'texthighlight': function (value) {
                highlightSelectedText(value);
            }
        }
    };

    var quill = new Quill('#editor', {
        theme: 'bubble',
        modules: {
            toolbar: toolbarOptions
        }
    });

    window.quill = quill;

    // Open default tab. See: https://www.w3schools.com/howto/howto_js_tabs.asp
    const defualtTab = document.getElementById("default-tab-button");
    defualtTab.click();

    // Quill content alteration.
    quill.on('text-change', function (delta, oldDelta, source) {
        updateOpenTab();
    });
});

#all{
    margin: 50px 120px;
}

*{
    margin: 0px;
    padding: 0px;
}

.a{
  fill: black;
}

.b{
  fill: yellowgreen;
}

/*###################### */
/* TEXT HIGHLIGHT        */
/*###################### */

.ql-texthighlight-1,
.ql-texthighlight-2,
.ql-texthighlight-3,
.ql-texthighlight-4 {
  border-radius: 2px;
  padding: 2px 2px;
}

.ql-texthighlight-1 { background: rgb(254, 255, 171); }
.ql-texthighlight-2 { background: rgb(255, 171, 171); }
.ql-texthighlight-3 { background: rgb(171, 207, 255); }
.ql-texthighlight-4 { background: rgb(178, 255, 171); }
.ql-texthighlight-5 { color: rgb(225, 225, 225); }

/*###################### */
/* TABS                  */
/*###################### */

 /* Style the tab */
 .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tab-content {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
  } 

/*###################### */
/* DELTA, TEXT AND HTML  */
/*###################### */

#tab-content-delta,
#tab-content-html,
#tab-content-text {
    padding: 0px;
}

pre{
    white-space: normal;
}

code{
    white-space: pre-wrap;
}

#tab-content-delta p{
    font-family: Candara;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
        </script>

    <!-- Highlight -->
    <link rel="stylesheet"
      href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">
    <script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>

    <!-- Quill -->
    <link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
    <script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

    <!-- My stuff -->
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="app.js"></script>
</head>

<body>
    <div id="all">
        <div id="toolbar-container">
            <span class="ql-formats">
                <button class="ql-texthighlight" value="1">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4" style="fill: rgb(254, 255, 171);">
                        <path d="M14.1 2.5l-1.9-1.9c-0.7-0.7-1.9-0.7-2.7 0l-6.9 6.9C2 8 1.9 8.8 2.1 9.4l-1.4 3.9c-0.1 0.2 0.3 0.5 0.5 0.5l3.9-1.4c0.7 0.2 1.4 0.1 2-0.4l6.9-6.9C14.8 4.4 14.8 3.2 14.1 2.5zM12.6 4.8L7.4 9.9c-0.3 0.3-0.8 0.3-1.2 0L4.7 8.4C4.4 8 4.4 7.5 4.7 7.2l5.2-5.2c0.3-0.3 0.8-0.3 1.2 0l1.5 1.5C12.9 3.9 12.9 4.5 12.6 4.8z" />
                        <rect x="1.6" y="14.3" width="8.1" height="1.1" />
                    </svg>
                </button>
                <button class="ql-texthighlight" value="2">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4" style="fill: rgb(255, 171, 171);">
                        <path d="M14.1 2.5l-1.9-1.9c-0.7-0.7-1.9-0.7-2.7 0l-6.9 6.9C2 8 1.9 8.8 2.1 9.4l-1.4 3.9c-0.1 0.2 0.3 0.5 0.5 0.5l3.9-1.4c0.7 0.2 1.4 0.1 2-0.4l6.9-6.9C14.8 4.4 14.8 3.2 14.1 2.5zM12.6 4.8L7.4 9.9c-0.3 0.3-0.8 0.3-1.2 0L4.7 8.4C4.4 8 4.4 7.5 4.7 7.2l5.2-5.2c0.3-0.3 0.8-0.3 1.2 0l1.5 1.5C12.9 3.9 12.9 4.5 12.6 4.8z" />
                        <rect x="1.6" y="14.3" width="8.1" height="1.1" />
                    </svg>
                </button>
                <button class="ql-texthighlight" value="3">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4" style="fill: rgb(171, 207, 255);">
                        <path d="M14.1 2.5l-1.9-1.9c-0.7-0.7-1.9-0.7-2.7 0l-6.9 6.9C2 8 1.9 8.8 2.1 9.4l-1.4 3.9c-0.1 0.2 0.3 0.5 0.5 0.5l3.9-1.4c0.7 0.2 1.4 0.1 2-0.4l6.9-6.9C14.8 4.4 14.8 3.2 14.1 2.5zM12.6 4.8L7.4 9.9c-0.3 0.3-0.8 0.3-1.2 0L4.7 8.4C4.4 8 4.4 7.5 4.7 7.2l5.2-5.2c0.3-0.3 0.8-0.3 1.2 0l1.5 1.5C12.9 3.9 12.9 4.5 12.6 4.8z" />
                        <rect x="1.6" y="14.3" width="8.1" height="1.1" />
                    </svg>
                </button>
                <button class="ql-texthighlight" value="4">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4" style="fill: rgb(178, 255, 171);">
                        <path d="M14.1 2.5l-1.9-1.9c-0.7-0.7-1.9-0.7-2.7 0l-6.9 6.9C2 8 1.9 8.8 2.1 9.4l-1.4 3.9c-0.1 0.2 0.3 0.5 0.5 0.5l3.9-1.4c0.7 0.2 1.4 0.1 2-0.4l6.9-6.9C14.8 4.4 14.8 3.2 14.1 2.5zM12.6 4.8L7.4 9.9c-0.3 0.3-0.8 0.3-1.2 0L4.7 8.4C4.4 8 4.4 7.5 4.7 7.2l5.2-5.2c0.3-0.3 0.8-0.3 1.2 0l1.5 1.5C12.9 3.9 12.9 4.5 12.6 4.8z" />
                        <rect x="1.6" y="14.3" width="8.1" height="1.1" />
                    </svg>
                </button>
                <button class="ql-texthighlight" value="5">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.4 15.4" style="fill: rgb(225, 225, 225);">
                        <path d="M14.1 2.5l-1.9-1.9c-0.7-0.7-1.9-0.7-2.7 0l-6.9 6.9C2 8 1.9 8.8 2.1 9.4l-1.4 3.9c-0.1 0.2 0.3 0.5 0.5 0.5l3.9-1.4c0.7 0.2 1.4 0.1 2-0.4l6.9-6.9C14.8 4.4 14.8 3.2 14.1 2.5zM12.6 4.8L7.4 9.9c-0.3 0.3-0.8 0.3-1.2 0L4.7 8.4C4.4 8 4.4 7.5 4.7 7.2l5.2-5.2c0.3-0.3 0.8-0.3 1.2 0l1.5 1.5C12.9 3.9 12.9 4.5 12.6 4.8z" />
                        <rect x="1.6" y="14.3" width="8.1" height="1.1" />
                    </svg>
                </button>
            </span>
            <span class="ql-formats">
                <button class="ql-texthighlight" value="0">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -18 440.96 440" style="fill: white;">
                        <path d="m410.667969 405.207031h-394.667969c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h394.667969c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0" />
                        <path d="m216.746094 405.207031c-4.09375 0-8.191406-1.558593-11.304688-4.695312-6.253906-6.25-6.253906-16.382813 0-22.632813l195.625-195.628906c5.097656-5.097656 7.894532-11.753906 7.894532-18.773438 0-7.144531-2.796876-13.886718-7.894532-18.984374l-104.746094-104.75c-6.398437-6.527344-13.84375-7.871094-18.988281-7.871094-7.125 0-13.757812 2.753906-18.644531 7.765625l-218.792969 218.796875c-6.550781 6.398437-7.894531 13.824218-7.894531 18.984375 0 7.125 2.753906 13.761719 7.765625 18.644531l81.835937 81.835938c6.25 6.25 6.25 16.382812 0 22.636718-6.253906 6.25-16.386718 6.25-22.636718 0l-81.707032-81.707031c-11.070312-10.839844-17.257812-25.578125-17.257812-41.410156 0-15.976563 6.1875-30.785157 17.40625-41.75l218.539062-218.515625c21.699219-22.273438 61.335938-22.230469 83.136719.128906l104.597657 104.617188c11.136718 11.136718 17.28125 25.898437 17.28125 41.601562 0 15.550781-6.144532 30.25-17.28125 41.386719l-195.625 195.625c-3.117188 3.136719-7.210938 4.695312-11.308594 4.695312zm0 0" />
                        <path d="m333.269531 288.703125c-4.097656 0-8.191406-1.554687-11.308593-4.691406l-165.117188-165.121094c-6.25-6.25-6.25-16.382813 0-22.632813 6.25-6.253906 16.382812-6.253906 22.632812 0l165.121094 165.117188c6.25 6.25 6.25 16.386719 0 22.636719-3.15625 3.113281-7.253906 4.691406-11.328125 4.691406zm0 0" />
                    </svg>
                </button>
            </span>
        </div>
        <div id="editor">
            <h2>O que significa Geografia?</h2>
            <p>
                A palavra “geografia” tem origem grega e é formada pelos radicais “geo”, que significa Terra, e
                “grafia”,
                que significa descrição. Essa nomenclatura refere-se à definição antiga da ciência geográfica, que
                relacionava Geografia somente aos fenômenos que ocorrem na superfície terrestre.
            </p>
            <h2>
                Construção da Geografia como ciência
            </h2>
            <p>
                A Geografia é uma ciência que foi construída, ou desconstruída, ao longo dos anos. Isso ocorreu pelo
                fato de
                que, ao longo do tempo, essa ciência passou por diversas alterações em relação às correntes filosóficas
                e
                aos processos históricos vividos pelas sociedades. Ao longo de toda essa transformação, os
                conceitos-chaves
                que norteavam o estudo da Geografia renovaram-se, alterando a abrangência dessa área de estudo. Região,
                território, lugar, paisagem e espaço são os principais conceitos-chaves que fizeram parte dessa
                (des)construção.
            </p>
            <p>
                A Geografia ficou conhecida como Geografia Tradicional do período que se estendeu de 1870, quando essa
                ciência foi institucionalizada nas universidades europeias, até 1950. Nesse período, foram privilegiados
                os
                conceitos “região” e “paisagem” como objeto de estudo da Geografia. Portanto, o espaço, nesse momento,
                não
                era um conceito-chave para o estudo geográfico.
            </p>
            <p>
                Em meados dos anos 50, no período pós-guerra, no qual o mundo experimentava o aparecimento de diversos
                avanços tecnológicos, surgiu uma nova geografia. Nesse período, o conceito-chave “espaço” passou a
                orientar
                o pensamento geográfico. Todo o estudo geográfico anterior a essa época pregava a neutralidade, sem se
                preocupar com os problemas sociais, pois acreditavam que esses problemas não deveriam ser estudados por
                geógrafos.
            </p>
            <p>
                Surgiu, então, o que ficou conhecido como Geografia Crítica, que acreditava que os geógrafos deveriam
                engajar-se politicamente, ou seja, não desvincular a produção científica do contexto histórico. O
                espaço,
                então, passou a ser visto como espaço social, no qual se estabelecem as relações entre a sociedade e o
                meio.
                O principal representante dessa corrente filosófica no Brasil foi o geógrafo Milton Santos.
            </p>
            <p>
                As correntes da Geografia conhecidas como Humanista e Cultural surgiram nesse mesmo período, contudo,
                apresentaram uma nova noção de espaço: o espaço vivido, no qual se destacam as experiências vividas e os
                aspectos subjetivos. Assim, o conceito-chave deixou de ser “espaço” e tornou-se “lugar”. O lugar
                representa,
                então, a subjetividade, as experiências, o cotidiano, a ligação da sociedade com o meio por meio do
                simbólico.
            </p>
            <p>
                A Geografia, portanto, é palco de diversas discussões a respeito de seu objeto de estudo, visto que, ao
                longo dos anos, essa ciência passou por períodos de construção e desconstrução de seu pensamento.
            </p>
            <h2>
                Ramos da Geografia
            </h2>
            <p>
                A Geografia é dividida em alguns ramos, o que não significa que essa ciência deve ser estudada de forma
                compartimentada. Essa divisão é feita apenas para nortear os estudos, visto que as relações entre o meio
                e a
                natureza são indissociáveis.
            </p>
            <h2>
                Qual é a importância da Geografia?
            </h2>
            <p>
                É essencial entender as relações entre o meio e a sociedade. É por meio dessas relações que podemos
                compreender
                a dinâmica do mundo, os processos históricos que interferem nela e a influência das características
                geográficas
                em uma determinada cultura.
            </p>
            <p>
                Por meio da Geografia, podemos compreender os fenômenos que ocorrem na superfície terrestre e suas
                implicações
                sobre a sociedade. Podemos distinguir as diferenças culturais, econômicas e políticas entre os povos.
            </p>
            <p>
                A Geografia permite que analisemos nossa relação com o meio, com os recursos naturais e com tudo
                aquilo que a natureza fornece para a manutenção da vida. Permite ainda compreender como a sociedade
                impacta positivamente e negativamente o meio, oferecendo alternativas para preservá-lo.
            </p>
            <p>
                A compreensão do espaço geográfico e das alterações que o homem provoca nele permite-nos analisar nossa
                existência, nossa história e, por que não, nosso futuro.
            </p>
        </div>

        <!-- Add some space -->
        <div style="margin-top: 40px;"></div>

        <!-- Tab buttons -->
        <div class="tab">
            <button id="default-tab-button" class="tab-button"
                onclick="openTab(event, 'tab-content-delta')">Delta</button>
            <button class="tab-button" onclick="openTab(event, 'tab-content-text')">Text</button>
            <button class="tab-button" onclick="openTab(event, 'tab-content-html')">HTML</button>
        </div>

        <!-- Tab contents -->
        <div id="tab-content-delta" class="tab-content">
            <p>...</p>
            <pre><code class="json"></code></pre>
        </div>
        <div id="tab-content-text" class="tab-content">
            <pre><code class="plaintext"></code></pre>
        </div>
        <div id="tab-content-html" class="tab-content">
            <pre><code class="html"></code></pre>
        </div>
    </div>
</body>

</html>