rajukottedi/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remark42 custom style changes - not working

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
_includes/comments/remark42.html
View File

@ -1,3 +1,21 @@
<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 id="remark42">
</div> </div>
@ -6,30 +24,53 @@
host: remark42Host, host: remark42Host,
site_id: siteId, site_id: siteId,
components: ['embed'], components: ['embed'],
style: remark42Style,
max_shown_comments: 10, max_shown_comments: 10,
theme: modeToggle.modeStatus, theme: modeToggle.modeStatus,
locale: 'en', locale: 'en',
show_email_subscription: false show_email_subscription: false
}; };
(function (c) { (function (c) {
for (var i = 0; i < c.length; i++) { for (var i = 0; i < c.length; i++) {
var d = document, s = d.createElement('script'); var d = document, s = d.createElement('script');
s.src = remark_config.host + '/web/' + c[i] + '.js'; s.src = remark_config.host + '/web/' + c[i] + '.js';
s.defer = true; s.defer = true;
(d.head || d.body).appendChild(s); (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']); })(remark_config.components || ['embed']);
var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0]; var targetDiv = document.getElementById("sidebar").getElementsByClassName("mode-toggle")[0];
if (targetDiv != null) { if (targetDiv != null) {
targetDiv.addEventListener("click", () => { targetDiv.addEventListener("click", () => {
window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light'); window.REMARK42.changeTheme(modeToggle.modeStatus === 'light' ? 'dark' : 'light');
}) })
} }
// $('<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');
// 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>
<!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> --> <!-- <script src="{{ '/assets/js/comments/remark42.js' | relative_url }}"></script> -->

1
_includes/head.html
View File

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