Thêm bộ gõ công thức toán học vào Website(blog), forum của bạn.

Dạo qua các forum toán học mình nhận thấy bộ gõ công thức toán học dành cho thành viên vẫn còn khá nhiều hạn chế.

Bởi vậy mình đã dành thời gian xây dựng bộ Mathtype này giúp các bạn giảm thiểu tối đa thời gian gõ để hoạt động học tập trong trên diễn đàn hiệu quả hơn.

Nhấn vào hình để xem kích thước thật

Giới thiệu qua về bộ Mathtype này :

- Được xây dựng dựa trên Mathjax với 2 kiểu gõ là : kiểu gõ Ascii và Codecogs với kiểu gõ Latex.
- Với kiểu Ascii có 2 chế độ gõ là gõ công thức và gõ bài toán.
   + Kiểu gõ công thức chỉ gõ duy nhất công thức
   + Kiểu gõ cả bài toán cho phép nhập cả một bài toán hoàn chỉnh.
- Tự động hiển thị xem trước trong khi gõ.



Làm sao để hiển thị công thức toán học :

Xem hướng dẫn : Tại đây

Thêm bộ gõ vào Forum website của bạn :

Đầu tiên mời bạn xem Demo :

DEMO

Các bước thêm vào Website (forum) thì bạn tự thực hiện từ File Download sau nhé :

Download 

Thêm bộ gõ vào Blogger :

Bước 1: Thêm code sau vào trước </head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 <script type="text/javascript" src="http://myjectpro1.googlecode.com/files/jquery.fancybox.js"></script>
<style type="text/css">
/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-skin{width:660px !important; overflow:hidden;}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
color: #444;
text-shadow: none;
-webkit-border-radius: 0px;
  -moz-border-radius: 0px;
       border-radius: 0px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
       box-shadow: 1px 0px 1px 1px rgba(0, 0, 0, 0.4);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: none;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 660px;
height: 100%;
scroll:no;
overflow: hidden;
}
.fancybox-image {
max-width: 640px;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
.fancybox-close{
background:url("http://www.tfl.gov.uk/tfl/gettingaround/maps/buses/tfl-bus-map/img/icons/CloseButton.png") no-repeat;
z-index:9999999;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -120px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background:url("http://goo.gl/FYHC2") no-repeat;
}
#fancybox-loading div {
width: 104px;
height: 88px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: 0px;
right: -19px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: black;
opacity:0.7;
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
  -moz-border-radius: 15px;
       border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
a#btn1 {
position: relative;
    color: rgba(255,255,255,1);
    text-decoration: none;
    background-color: rgba(219,87,5,1);
    font-family: 'Yanone Kaffeesatz';
    font-weight: 700;
    font-size: 14px;
    display: block;
    padding: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 5px 5px rgba(0,0,0,.7);
    -moz-box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 9px 5px rgba(0,0,0,.7);
    box-shadow: 0px 5px 0px rgba(219,31,5,1), 0px 9px 5px rgba(0,0,0,.7);
    margin: 20px 20px auto;
width: 100px;
text-align: center;
-webkit-transition: all .1s ease;
-moz-transition: all .1s ease;
-ms-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
a#btn1:active {
    -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9);
    position: relative;
}
</style>

Bước 2: Search với khóa

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Bạn sẽ tìm được 4 khóa trên :

Thêm vào sau khóa vị trí thứ 2 và thứ 4 code sau :

<a id="btn1" class="fancybox fancybox.iframe" href="http://onthi.erhay.com/p/math-editor-public.html">Mở bộ gõ</a>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('a.fancybox').fancybox();
    });
</script>

Bước 3: Save Template

-----------------------------------------------------------------------------------------------------------
(M.Anh - Erhay). Mọi ý kiến thắc mắc bạn có thể comment tại đây để nhận được giúp đỡ