はてなブログでマーカーが引けるようになります。

highlighter.html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
<script>


// DOM が描画されるまで待つ
setTimeout(vue, 1000);


function vue() {
    new Vue({
        el: '#container',
        components: {
            hl: highlight(),
        }
    });
}

// Just return a Vue component.
function highlight() {
    // 2) configuration
    const startLineOffset = -100;
    class Style {
        constructor(highlighter) {
            const color = highlighter.color
            this['background'] = `linear-gradient(${color}, ${color})`;
            this['background-size']      = '0% 45%';
            this['background-position']  = '0% 100%';
            this['background-repeat']    = 'no-repeat';
            this['transition-delay']     = '1s';
            this['transition-duration']  = '2.5s';
        }
    };
    
    // 3) Return a Vue component.
    return {
        template: 
            '<span v-bind:style="style">' +
                '<slot></slot>' +
            '</span>',
        props: ['color'],
        data: function() {
            return {
                style: new Style(this),
            };
        },
        mounted: function() {
            window.addEventListener('scroll', this.scroll);
        },
        methods: {
            scroll: function() {
                if (this.startLine() < this.domRectTop()){
                    this.style['background-size'] = '  0% 45%';
                } else {
                    this.style['background-size'] = '100% 45%';
                }
            },
            startLine: function() {
                return window.innerHeight + startLineOffset;
            },
            domRectTop: function() {
                return this.$el.getBoundingClientRect().top;
            },
        },
    };
}
</script>