remark42 custom style changes - not working

This commit is contained in:
Bangara Raju Kottedi 2023-08-27 22:28:47 +05:30
parent 9d6fc1a6d8
commit ca2686959f
3 changed files with 78 additions and 21 deletions

View File

@ -1,35 +1,76 @@
<style>
.comment-form__markdown-link {
color: rgba(117, 117, 117, .9);
}
.E_A {
background-color: rgba(117, 117, 117, .9) !important;
}
.E_A:focus {
background-color: rgba(117, 117, 117, .9);
}
.E_A:hover {
background-color: #1d1d1d;
}
</style>
<div id="remark42">
</div>
<script>
var remark_config = {
host: remark42Host,
site_id: siteId,
components: ['embed'],
host: remark42Host,
site_id: siteId,
components: ['embed'],
style: remark42Style,
max_shown_comments: 10,
theme: modeToggle.modeStatus,
max_shown_comments: 10,
theme: modeToggle.modeStatus,
locale: 'en',
show_email_subscription: false
};
locale: 'en',
show_email_subscription: false
};
(function (c) {
for (var i = 0; i < c.length; i++) {
var d = document, s = d.createElement('script');
s.src = remark_config.host + '/web/' + c[i] + '.js';
s.defer = true;
(d.head || d.body).appendChild(s);
(function (c) {
for (var i = 0; i < c.length; i++) {
var d = document, s = d.createElement('script');
s.src = remark_config.host + '/web/' + c[i] + '.js';
s.defer = true;
(d.head || d.body).appendChild(s);
c = d.createElement('link');
c.href = remark_config.style;
c.rel = 'stylesheet';
c.defer = true;
(d.head).appendChild(c);
}
})(remark_config.components || ['embed']);
var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
if (targetDiv != null) {
targetDiv.addEventListener("click", () => {
window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
})
}
})(remark_config.components || ['embed']);
var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
// $('<style>.comment-form__markdown-link {color: rgba(117, 117, 117, .9);}.E_A {background-color: rgba(117, 117, 117, .9) !important;}.E_A:focus {background-color: rgba(117, 117, 117, .9);}.E_A:hover {background-color: #1d1d1d;}</style>')
// .appendTo('button.E_A');
if (targetDiv != null) {
targetDiv.addEventListener("click", () => {
window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
})
}
// function writeStyles(cssText) {
// var iframeElement = document.getElementsByTagName('iframe')[0];
// if (iframeElement != null) {
// styleElement = document.createElement('style');
// styleElement.type = 'text/css';
// styleElement.id = styleName;
// styleElement.innerHTML = cssText;
// iframeElement.getElementsByTagName('head')[0].appendChild(styleElement);
// }
// }
// var cssText = '.comment-form__markdown-link {color: rgba(117, 117, 117, .9);}.E_A {background-color: rgba(117, 117, 117, .9) !important;}.E_A:focus {background-color: rgba(117, 117, 117, .9);}.E_A:hover {background-color: #1d1d1d;}';
// writeStyles(cssText);
</script>
<!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> -->

View File

@ -89,6 +89,7 @@
var siteId = "{{site.id}}";
var postId = "{{page.title}}";
var remark42Host = "{{ site.comments.remark42.host }}";
var remark42Style = "{{ '/assets/css/remark42.css' | relative_url }}"
function ajax(url) {
return new Promise(function (resolve, reject) {

15
assets/css/remark42.css Normal file
View File

@ -0,0 +1,15 @@
.comment-form__markdown-link {
color: rgba(117, 117, 117, .9);
}
.E_A {
background-color: rgba(117, 117, 117, .9) !important;
}
.E_A:focus {
background-color: rgba(117, 117, 117, .9);
}
.E_A:hover {
background-color: #1d1d1d;
}